李應該保持正確

-1

我有一個列表與三個不同寬度的列表項目。如果第一個li值大於另一個，則列表項左移（截圖）。李應該保持正確

有沒有辦法預防？

我的HTML

<ul> 
    <li class="nav-button"> 
     <nav class="main-nav" style="width:400px"> 
     </nav> 
    </li> 
    <li style="width:200px"><a href="#"></a><i class="fa fa-envelope"></i></li> 
    <li style="width:200px"><a href="#"></a><i class="fa fa-key"></i></li> 
</ul>

來源

2015-10-30 susanloek

他們不浮動（大概無論如何，這HTML（這是可怕的：不帶鏈接的文本，並沒有文字旁邊斜體文本鏈接）將不會產生結果沒有你沒有與我們分享的CSS），他們只是左對齊。你想要發生什麼？ – Quentin

最後兩個元素應該保持正確。 – susanloek

CSS提供了許多方法來將事情調整到正確的位置，這取決於諸如要調整的元素的顯示屬性等內容，並且屏幕截圖意味着您已將其從默認調整爲更改，但我們不知道至。對齊事情是非常基本的東西，你應該能夠通過搜索引擎的一點點工作來找到解決方案。 – Quentin

這裏是你所需要的。 A working JSFIDDLE（請在將來的問題中添加一個工作小提琴，以便我們可以使用）。

我所做的是給你的ul一組寬度，與最大li填充ul的100％，而其他的填充ul的50％。（因爲這也是你的例子中發生的事情，400px和200px）。給那些塊float: right;將把它們放在一行。給一個margin-left解決了這個問題（因爲50％+ 50％+ 10px + 10px> 100％寬度）。

HTML

<ul> 
    <li class="nav-button"> 
     <nav class="main-nav" style="width:400px;"> 
     </nav> 
    </li> 
    <li ><a href="#"></a><i class="fa fa-envelope"></i></li> 
    <li ><a href="#"></a><i class="fa fa-key"></i></li> 
</ul>

我已刪除了所有行CSS從HTML，你也應該這樣做在您的項目。

CSS

ul { 
    padding: 0; 
    width: 400px; 
} 

li { 
    height: 100px; 
    list-style: none; 
    width: 50%; 
    background: blue; 
    margin-bottom: 5px; 
} 

li.nav-button { 
    width: 100%; 
    background: red; 
} 

li:not(.nav-button) { 
    float: right; 
    margin-left: 10px; 
}

來源

2015-10-30 11:36:44 Rvervuurt

李應該保持正確

回答

相關問題