在div內均勻分隔行

我有一個div裏面有一個表格，它用來創建指向它的鏈接。到目前爲止，這就是我爲網站所做的一切。我正在試圖分隔行，以便我可以實現jQuery，但是，我還沒有開始。在div內均勻分隔行

我的問題是，我無法讓行均勻分佈在整個div中。我試過填充左/右，但是，這不適用於寬度和高度，並且邊界左/右不起作用。有沒有辦法做到這一點？或者，我應該擺脫使用表格併爲每個導航選項創建div的想法？

Code

來源

2017-05-06 UghThatGuyAgain

您能否提供一個> 1行的示例？ – tavnab

@UghThatGuyAgain - 我不清楚你要達到什麼目標 - 如果你的桌子寬度達到100％，那麼這些行將「在整個div中均勻分佈」。通常使用表格來定位元素不是一個好主意。 – Picard

@Picard我應該更具體一些，我希望它們均勻分佈在整個div中，同時在行之間提供均勻的空間。我會嘗試使用div重新創建相同的事物，但我發現這樣做更容易。謝謝！ – UghThatGuyAgain

下面是使用列表和顯示的一種可能的解決方案：flex用於定位。您的更新示例：https://repl.it/Hj62/6。

HTML部分：

<div id="header-nav-content"> 
    <ul class="table-nav-content"> 
    <li class="nav-home">Home</li> 
    <li class="nav-about">About</li> 
    <li class="nav-contact">Contact</li> 
    </ul> 
</div>

CSS部分：

.table-nav-content { 
    text-align: center; 
    margin: auto; 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    padding: 0; 
} 
.table-nav-content li { 
    list-style: none; 
}

您還可以檢查：

justify-content: space-between;

不適合你更好。您可以找到更多關於柔性定位的信息，例如：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

來源

2017-05-06 16:27:06 Picard

謝謝！這個答案對我來說是最好的，我只是刪除了額外的home2/3等等，我會重新調整它們的大小以確保它們看起來不錯。 – UghThatGuyAgain

我會建議你使用HTML列表方法，https://www.w3schools.com/html/html_lists.asp。您可能希望使用無邊距的邊距來均勻分隔每個項目，When to use margin vs padding in CSS。

<ul style="list-style:none;"> 
     <li style="display:block;float:left;margin:5px" class="nav-home">Home</li> 
     <li style="display:block;float:left;margin:5px" class="nav-about">About</li> 
     <li style="display:block;float:left;margin:5px" class="nav-contact">Contact</li> 
</ul>

來源

2017-05-06 16:16:52

在div內均勻分隔行

回答

相關問題