ボタン群を親ディビジョンの全幅に塗りつぶす

私は幅360pxの小さなパネルを持っています。パネルの上部には、現在3つのボタンからなるナビゲーションバーがあります（数字は問題ありません）。私はdivの全体の幅を塗りつぶし、内部の単語の長さに応じて多かれ少なかれスペースを取るボタンをしたい。現在のところ、ボタンの幅を値に設定する方法しかわかりませんが、ボタンを追加すると値を手動で変更する必要があります。ボタン群を親ディビジョンの全幅に塗りつぶす

what it currently looks like

これは私が今持っているものですが、明らかにそれは恐ろしい見えます。どのようにして最初のボタンの幅を狭くし、2番目のボタンを広くし、3つのボタンを一緒にパネルの全幅に合わせることができますか？

は、ここに私のコードです：

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

私は、このためのフレキシボックスソリューションとなるだろう：

.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およびの間のバランスです。 with: 33%;に現在のpadding (20px)を指定すると動作しません。 padding: 0px;を設定した場合、テキストがオーバーフローしますが、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

が、3つのボタンは、外側のdivの幅全体を占有していないと、彼らは今、各 – Pete

WEUの間のギャップを持って、その場合にはフレキシボックスは@Pete – RizkiDPrast

で私が得ることができる最も近いものが望ましいです「最小幅」を与えることですが、屈曲ほど柔軟ではありません。私は答えを編集してくださいを編集してください。 – 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

ボタン群を親ディビジョンの全幅に塗りつぶす

答えて

関連する問題