使用下拉對齊向後箭頭的問題

在向下箭頭旁邊放置向後箭頭時遇到問題。問題在於它正在將箭頭居中，好像下拉處於活動狀態。我希望它在下拉菜單的左側不對齊。使用下拉對齊向後箭頭的問題

我包括一個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

使用下拉對齊向後箭頭的問題

回答

相關問題