使一組按鈕填充父div的整個寬度

我有一個寬度爲360px的小面板。在面板的頂部有一個導航欄，由當前3個按鈕組成（數字應該不重要）。我希望按鈕填充div的整個寬度，並根據單詞的長度佔用更多或更少的空間。目前我只知道如何將按鈕的寬度設置爲一個值，但如果我添加一個按鈕，則需要手動更改這些值。使一組按鈕填充父div的整個寬度

what it currently looks like

這是我現在有，但顯然它看起來可怕。我怎樣才能讓第一個按鈕變寬，第二個按鈕變寬，並且所有三個按鈕一起佔用面板的整個寬度？

這裏是我的代碼：

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>TEST</title> 
    <link type="text/css" rel="stylesheet" href="test.css"/> 
</head> 
<body> 
    <div class="panel"> 
     <ul class="nav"> 
      <li class="buttons">SHORT</li> 
      <li class="buttons">LOOOOOOOOOOONG</li> 
      <li class="buttons">...</li> 
     </ul> 
    </div> 
</body> 
</html>

CSS：

.panel { 
background-color: grey; 
width: 360px; 
height: 600px; 
position: relative; 
border: 1px solid black; 
} 

.nav { 
    padding: 0; 
    margin: 0; 

} 

.buttons { 
    float: left; 
    display: block; 
    padding: 0px 20px; 
    height: 40px; 
    width: 60px; 
    background-color: #666666; 
    border-right: 1px solid black; 
    border-bottom: 1px solid black; 
    text-align: center; 
    line-height: 40px; 

}

謝謝！

來源

2016-11-23 danielaandrea

我會去與這個Flexbox的解決方案：

.panel { 
 
    background-color: grey; 
 
    width: 360px; 
 
    height: 600px; 
 
    position: relative; 
 
    border: 1px solid black; 
 
} 
 
.nav { 
 
    padding: 0; 
 
    margin: 0; 
 
    
 
    /* add the following */ 
 
    width:100%; 
 
    display:flex; 
 
    flex-direction:row; 
 
} 
 

 
.buttons { 
 
    display: block; 
 
    padding: 0px 20px; 
 
    height: 40px; 
 
    background-color: #666666; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    
 
    /* remove your width and float and add the following */ 
 
    flex-grow:1; 
 
} 
 

 
/*optional*/ 
 
.nav li:last-child {border-right:none;}

<div class="panel"> 
 
    <ul class="nav"> 
 
    <li class="buttons a">SHORT</li> 
 
    <li class="buttons b">LOOOOOOOOOOONG</li> 
 
    <li class="buttons c">...</li> 
 
    </ul> 
 
</div>

More information about flex

A complete guide to flexbox

來源

2016-11-23 14:12:56 Pete

這是一個強烈推薦！ – Syden

這是.buttonspadding,font-size和width之間的平衡。如果您給with: 33%;使用當前的padding (20px)，它將不起作用。如果你設置了padding: 0px;它會但是looong文本會溢出，設置爲font-size可以幫助但它仍然會太緊。

嘗試調整這些事情，看看你是否能夠找到適當的平衡。

下面的例子：

.panel { 
 
    background-color: grey; 
 
    width: 360px; 
 
    height: 600px; 
 
    position: relative; 
 
    border: 1px solid black; 
 
} 
 

 
.nav { 
 
    padding: 0; 
 
    margin: 0; 
 
    margin-right: -2px; 
 
} 
 

 
.buttons { 
 
    float: left; 
 
    padding: 0px 0px; 
 
    height: 40px; 
 
    width: 33%; 
 
    list-style: none; 
 
    background-color: #666666; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    text-align: center; 
 
    line-height: 40px; 
 
    font-size: 12px; 
 
}

<div class="panel"> 
 
    <ul class="nav"> 
 
     <li class="buttons">SHORT</li> 
 
     <li class="buttons">LOOOOOOOOOOONG</li> 
 
     <li class="buttons">...</li> 
 
    </ul> 
 
</div>

來源

2016-11-23 14:01:05 Syden

您canremove Width（將其內容設置），並設置display:inline-block（而不是浮動），以實現這一目標。試試這個。

.panel { 
 
background-color: grey; 
 
width: 360px; 
 
height: 600px; 
 
position: relative; 
 
border: 1px solid black; 
 
} 
 

 
.nav { 
 
    margin:0 0; 
 
    padding:0 0; 
 
    width:100%; 
 
    list-style-type: none; 
 
} 
 

 
.buttons { 
 
    display: inline-block; 
 
    height: 40px; 
 
    padding: 0 5px; 
 
    min-width:23.3%; 
 
    margin-right: -4px; 
 
    
 
    background-color: #666666; 
 
    border-right: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    text-align: center; 
 
    line-height: 40px; 
 

 
}

<div class="panel"> 
 
     <ul class="nav"> 
 
      <li class="buttons">SHORT</li> 
 
      <li class="buttons">LOOOOOOOOOOONG</li> 
 
      <li class="buttons">...</li> 
 
     </ul> 
 
    </div>

來源

2016-11-23 14:04:19 RizkiDPrast

但三個按鈕不佔用外div的整個寬度，他們現在在每個 – Pete

WEU之間的間隙，在這種情況下實現Flexbox優選通過@Pete – RizkiDPrast

最接近的一個我可以得到是給出'最小寬度' - 但不像flex那麼靈活。我編輯答案請看看。 – RizkiDPrast

-1

你可以申請33。33％的寬度和刪除邊框和填充

.panel { 
 
background-color: grey; 
 
width: 360px; 
 
height: 600px; 
 
position: relative; 
 
border: 1px solid black; 
 
} 
 

 
.nav { 
 
    padding: 0; 
 
    margin: 0; 
 

 
} 
 
.buttons { 
 
    float: left; 
 
    display: block; 
 
    color: #fff; 
 
    padding: 0; 
 
    height: 40px; 
 
    width: 33.33%; 
 
    text-align: center; 
 
    line-height: 40px; 
 
} 
 
.buttons.a{ 
 
    background-color: red; 
 
} 
 
.buttons.b{ 
 
    background-color: green; 
 
} 
 
.buttons.c{ 
 
    background-color: blue; 
 
}

<div class="panel"> 
 
    <ul class="nav"> 
 
    <li class="buttons a">SHORT</li> 
 
    <li class="buttons b">LOOOOOOOOOOONG</li> 
 
    <li class="buttons c">...</li> 
 
    </ul> 
 
</div>

來源

2016-11-23 14:05:06 Rahul

使一組按鈕填充父div的整個寬度

回答

相關問題