填充權問題

我試圖在網站上實現響應式設計。我遇到的問題是我想要導航菜單適合總寬度的100％，並且最後一個元素（「Equipo」）上有某種我想要移除的正確填充，所以元素可以邊界。我該如何做到這一點？填充權問題

HTML：

<header class="mainHeader"> 
    <nav><ul> 
     <li><a href="#" class="menuActual">Inicio</a></li> 
     <li><a href="#">Obras</a></li> 
     <li><a href="#">Personas</a></li> 
     <li><a href="#">Búsqueda Avanzada</a></li> 
     <li><a href="#">Equipo</a></li> 
    </ul></nav> 
</header>

CSS：

.mainHeader nav { 
width: 100%; 
height: 30px; 
margin: 1% 0; 
} 
.mainHeader nav ul { 
list-style: none; 
margin: 0 auto; 
width: 100%; 
} 
.mainHeader nav ul li { 
float: left; 
display: inline; 
width: 20%; 
} 
ul { 
padding-left: 0; 
} 
.mainHeader nav ul li a:link, .mainHeader nav a:visited { 
width: 80%; 
height: 22px; 
display: inline-block; 
padding: 4px 0; 
text-align: center; 
color:#FFFFFF; 
background-color:#2e2e2e; 
border-left:5px solid #2e2e2e; 
}

這裏的臨時網頁文件的鏈接： http://basevideoarte.com.ar/juan/responsivetemp/index.htm 非常感謝！

來源

2014-01-09 DaNoiseMan

你可以嘗試'last-child'選擇器，並從最後一個元素中刪除填充。 'li {padding-right：10px;} li：last-child {padding-right：0}' –

沒有用。在填充權利之後，我也把！重要！ – DaNoiseMan

試試這個：

a { 
width: 100%; 
} 

li { 
width: 16%; 
padding-right: 4%; 
} 

li:last-child { 
padding-right: 0px; 
}

，如果你在那裏有更多的利潤或填充我沒有看，但即便如此，調整以適應這些，這將解決你的問題。

來源

2014-01-09 20:03:42 bboysupaman

問題不在於li元素上的填充。根本沒有任何填充。 –

感謝您的代碼！問題在於：a元素定義了寬度。將a元素設置爲100％寬度，並將list元素的寬度設置爲16％，使用4％填充權限和li：last-child使用填充權限爲0px。我將用準確的代碼編輯我的答案。 – bboysupaman

@AnthonyWeber這就是爲什麼我說「那種」，不知道在什麼地方製作這個空間。 – DaNoiseMan

如果您將最後一項對齊到右側，空格將不再相等。因此，使用.mainHeader nav ul li{text-align:center;}對準他們平等

來源

2014-01-09 20:04:50 n1kkou

你有你的<li>列表項並排排列的一面，和<a>鏈接（具有灰色背景）設置爲其父<li>的80％的寬度。這些鏈接是左對齊的，所以您可以看到最後一個鏈接上的間隙，就像其他鏈接一樣，等於列表項寬度的20％。

[編輯：]

這裏的一個fiddle演示如何空間<li>的出相匹配的標頭的寬度，中心爲在任一側的利潤率。我已經說明了佈局中發生了什麼的演示，其中鏈接僅佔用列表項的一部分來模擬鏈接之間的空間，並且我已經說明了如何通過單獨地將列表項分開。

希望這會更清楚一點。內聯樣式，如其他答案中推薦的，是usually a bad idea。最好讓事情簡單而靈活。

來源

2014-01-09 20:07:27 Dpeif

你是對的，如果我把鏈接100％沒有空間。仍然沒有關於如何解決它的線索。 – DaNoiseMan

我已經添加了一個小提琴來說明如何解決問題，避免內聯樣式和僞選擇器。希望這有幫助，祝你好運！ – Dpeif

這似乎工作：

.mainHeader nav ul li { 
float: left; 
width: 16%; 
margin-right: 5%; 
} 

.mainHeader nav ul li a { 
width: 100%; 
} 

.mainHeader nav ul li:last-child { 
float: right; 
margin: 0; 
}

來源

2014-01-09 20:30:27 seedy

只是一個不同的觀點。

對導航菜單使用ul/li引發了「適合」div內ul/lis的問題。你可以用許多不同的方式「適應」他們。左填充，右填充，改變持有者div的寬度（然後居中div），我相信還有很多其他的。

在THIS小提琴中，我只是改變了左邊的填充，它會「中心」div中的ul/li（我已經添加了邊框，所以很容易看清楚）。

我只是改變了這個CSS：

ul { 
padding-left: 23px; 
}

，並增加了周圍的邊框架格。

不比其他方法更好，只是不同而已。

來源

2014-01-09 20:41:49 TimSPQR

回答

相關問題