Сделать группу кнопок заполнить всю ширину родительского div

У меня есть небольшая панель с шириной 360 пикселей. В верхней части панели находится панель навигации, состоящая из 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

ЗЕСОМ, в этом случае Flexbox предпочтительно по @Pete – RizkiDPrast

ближайших один я могу получить заключается в том, чтобы дать 'min-width' - но не такой гибкий, как 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

ответ

Смежные вопросы