Я довольно новичок в HTML и CSS. Я пытаюсь заставить некоторые навигационные кнопки иметь одинаковый размер, одну треть ширины панели, в которой они находятся. Мне дали оригинальный код, и хотя я могу настроить его, я не могу заменить его напрямую .
Кнопки находятся в неупорядоченном списке. Они расположены горизонтально и должны занимать всю ширину панели, в которой они находятся. В Internet Explorer они отображаются правильно, каждый из них имеет одинаковый размер. В Chrome и Firefox они немного различаются по размеру: кнопка с самым коротким отображаемым текстом имеет наименьшую ширину, и когда текст становится длиннее, кнопка тоже. Все текстовые строки намного меньше, чем их кнопки, поэтому не нужно увеличивать размер кнопок для размещения строки.
Код устанавливает элементы элемента списка шириной 1%, что, как я прочитал, является хакерским способом заставить их принять примерно одинаковый размер. Здравый смысл подсказывает, что 33% должны дать мне то, что я хочу, но вместо этого общая ширина, занимаемая всеми тремя кнопками, составляет около 33%, оставляя оставшееся пространство, которое они должны заполнить, пустым. Я пробовал разные проценты, но результат не тот, который я ожидал: 10% работают для более широких окон, но не для узких; в пределах 10-33% кнопки имеют одинаковый размер, но постепенно уменьшаются, больше не заполняя доступное пространство; больше 33%, и кнопки снова начинают расти, но только первые две и не обязательно заполняют доступное пространство.
Я попытался изменить свойство display для элементов li из table-cell, но ни один из параметров, похоже, не работает. Подобные изменения для элементов ul также бесполезны. Я также подумал, что уменьшение максимальной ширины текстовых строк до примерно 80% может остановить рост кнопок пропорционально длине строки, но это не имело никакого значения.
Список:
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
min-width: 400px;
background-color: #bbc98f;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav-pills > li {
float: left;
border-style: solid;
text-align: center;
}
.nav-pills > li + li {
margin-left: 2px;
}
.nav-justified > li {
float: none;
display: table-cell;
width: 1%;
}
.panel {
margin-bottom: 10px;
margin-top: 10px;
background-color: #ffffff;
}
.panel-body {
padding: 15px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body class="">
<div class="body-content">
<div class="panel panel-body">
<ul class="nav nav-pills nav-justified">
<li>
<a href="/PartLibrary/Parts">Parts</a>
</li>
<li>
<a href="/PartLibrary/Recipes">Recipes</a>
</li>
<li>
<a href="/PartLibrary/RobotPrograms">Robot Programs</a>
</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
Мне бы хотелось, чтобы все три кнопки были одинакового размера независимо от ширины страницы, когда они находятся в одном ряду (они уже переключаются на вертикальный стек ниже определенной ширины). Чего мне не хватает?
Заранее спасибо.