使用下拉对齐向后箭头的问题

在向下箭头旁边放置向后箭头时遇到问题。问题在于它正在将箭头居中，好像下拉处于活动状态。我希望它在下拉菜单的左侧不对齐。使用下拉对齐向后箭头的问题

我包括一个jsfiddle显示。

HTML

<div id="portfolio"> 
<table> 
<tr> 
<td> 
    <a href="index.html"><div class="back-arrow-left" ></div></a> 
</td> 
<td> 
<dropdown> 
    <input id="toggle2" type="checkbox"> 
    <label for="toggle2" class="animate">Portfolio<i class="fa fa-list float-right"></i></label> 
    <ul class="animate"> 
     <li class="animate">Websites</li> 
     <li class="animate">Computer Animations</li> 
     <li class="animate">C/C++ Programs</li> 
    </ul> 
</dropdown> 
</td> 
</tr> 
</table> 
</div>

CSS

.back-arrow-left { 
width: 0; 
height: 0; 
border-top: 30px solid transparent; 
border-bottom: 30px solid transparent; 
border-right:30px solid gray; 
vertical-align: top; 
} 

.back-arrow-left:hover { 
border-right:30px solid #1ABC9C; 
} 

#portfolio{ 
width: 400px; 
float: right; 
} 

*{ 
padding: 0; 
margin: 0; 
font-family: 'Lato', sans-serif; 
box-sizing: border-box; 
    } 
    .float-right{ 
float: right; 
    } 
    .fa{ 
    font-size: .8em; 
    line-height: 22px !important; 
    } 
    dropdown{ 
    display: inline-block; 
    margin: 0px 50px; 
    } 
    dropdown label, dropdown ul li{ 
    display: block; 
    width: 200px; 
    background: #ECF0F1; 
    padding: 15px 20px; 
    } 
    dropdown label:hover, dropdown ul li:hover{ 
    background: #1ABC9C; 
    color: white; 
    cursor: pointer;} 

    dropdown label{ 
    color: #1ABC9C; 
    border-left: 4px solid #1ABC9C; 
    border-radius: 0 5px 0 0; 
    position: relative; 
    z-index: 2; 
} 
    dropdown input{ 
    display: none; 
} 
dropdown input ~ ul{ 
position: relative; 
visibility: hidden; 
opacity: 0; 
top: -20px; 
z-index: 1; 
} 
dropdown input:checked + label{ 
background: #1ABC9C; 
color: white; 
} 

dropdown input:checked ~ ul{ 
visibility: visible; 
opacity: 1; 
top: 0; 
} 
    $colors: #E74C3C, #0072B5, #2C3E50; 

@for $i from 1 through length($colors) { 
dropdown ul li:nth-child(#{$i}) { 
    border-left: 4px solid nth($colors, $i); 
    .fa{ 
    color: nth($colors, $i); 
    } 
    &:hover { 
    background: nth($colors, $i); 
    color: white; 
    .fa{ 
    color: white; 
    } 
    } 
    } 
} 

.animate{ 
-webkit-transition: all .3s; 
-moz-transition: all .3s; 
-ms-transition: all .3s; 
-ms-transition: all .3s; 
transition: all .3s; 
backface-visibility:hidden; 
-webkit-backface-visibility:hidden; /* Chrome and Safari */ 
-moz-backface-visibility:hidden; /* Firefox */ 
-ms-backface-visibility:hidden; /* Internet Explorer */

http://jsfiddle.net/e1nuabgs/

来源

2015-04-22 GiBiT 09

是否有您所使用的表特别的原因？这不符合HTML 5，并可能在稍后导致问题。

事实上，它的表是导致你的问题。你有围绕数据的表，它应该将其定向到你想要的顺序，但是你已经在使用css把它与表对齐！

如果你拿出表格，并添加一行到你的CSS它完美的工作。

.back-arrow-left { 
     float: left; 
     width: 0; 
     height: 0; 
     border-top: 30px solid transparent; 
     border-bottom: 30px solid transparent; 
     border-right:30px solid gray; 
     vertical-align: top; 
} 

<div id="portfolio"> 
    <a href="index.html"><div class="back-arrow-left" ></div></a> 
    <dropdown> 
     <input id="toggle2" type="checkbox"> 
     <label for="toggle2" class="animate">Portfolio<i class="fa fa-list float-right"></i></label> 
     <ul class="animate"> 
      <li class="animate">Websites</li> 
      <li class="animate">Computer Animations</li> 
     <li class="animate">C/C++ Programs</li> 
     </ul> 
    </dropdown> 
</div>

I've updated your JSFiddle

来源

2015-04-22 16:39:50

我最初试图一个div并以一个错误来了，所以我只是尝试不同的事物，以得到它的工作，并提出了表。这不是我在这里提交的干净的代码。谢谢，虽然这工作得很好。 –

够公平的。 :)如果它再次发生，只要注意浮游物在正确的位置和你的divs宽度不重叠。你有它！ :) –

，您可以给表数据保持你的背部箭头一类，改变的顶部垂直对齐方式。

.arrow_box{ 
    vertical-align: top; 
}

Updated jsFiddle

来源

2015-04-22 16:26:34

使用下拉对齐向后箭头的问题

回答

相关问题