Блог

Главная - Вопросы по программированию - Есть ли способ сделать эти элементы списка одинакового размера?

Есть ли способ сделать эти элементы списка одинакового размера?

#html #css #twitter-bootstrap #bootstrap-4

#HTML #css #twitter-bootstrap #bootstrap-4

Вопрос:

Я довольно новичок в HTML и CSS. Я пытаюсь сделать так, чтобы некоторые кнопки навигации имели одинаковый размер, одну треть ширины панели, в которой они находятся. Мне дали исходный код, и, хотя я могу его настроить, я не могу заменить его сразу.

Кнопки находятся в неупорядоченном списке. Они расположены горизонтально и должны заполнять всю ширину панели, на которой они находятся. В Internet Explorer они отображаются правильно, каждый из них имеет одинаковый размер. В Chrome и Firefox они имеют немного разные размеры: кнопка с самым коротким отображаемым текстом имеет наименьшую ширину, а по мере того, как текст становится длиннее, увеличивается и кнопка. Все текстовые строки намного меньше, чем их кнопки, поэтому кнопкам не нужно расти, чтобы вместить строку.

Код устанавливает для элементов элемента списка ширину 1%, что, как я читал, является хакерским способом заставить их занимать примерно одинаковый размер. Здравый смысл подсказывает, что 33% должны дать мне то, что я хочу, но вместо этого общая ширина, занимаемая всеми тремя кнопками, составляет около 33%, оставляя остальное пространство, которое они должны заполнить, пустым. Я пробовал разные проценты, но результат не тот, который я ожидал: 10%, похоже, работает для более широких окон, но не для узких; между 10-33% кнопки имеют одинаковый размер, но постепенно уменьшаются, больше не заполняя доступное пространство; все, что выше 33%, и кнопки начинают растиопять же, но только первые два и без обязательного заполнения доступного пространства.

Я попытался изменить свойство отображения для элементов 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>

Я бы хотел, чтобы все три кнопки были одинакового размера независимо от ширины страницы, когда они находятся в одной строке (они уже переключаются на вертикальный стек ниже определенной ширины). Чего мне не хватает?

Заранее спасибо.

Ответ №1:

«Мне дали исходный код, и, хотя я могу его настроить, я не могу заменить его сразу».
Что именно можно или нельзя заменить?

Таблицы (отображение: таблица-ячейка и т. Д.) Не Должны использоваться для компоновки.
Вы можете использовать ‘floats’, ‘flexbox’ или ‘grid’.

Если у вас ровно 3 элемента, вы можете просто использовать числа с плавающей запятой:

 /* Using Floats */

.nav-justified > li {
    display: inline-block;
    float: left;
    width: 33.3333%;
}

.nav-justified::after { /* clearfix */
    content: '';
    display: table;
    clear: both;
}

Если вы хотите, чтобы элементы <li> имели одинаковый размер, независимо от их количества, проще всего использовать flexbox:

 .nav-justified {
    display: flex;
}
.nav-justified > li {
    flex: 1 1 0; /* flex-grow: 1; flex-shrink: 1; flex-basis: 0 */
}

Это выделит одинаковый размер для каждого элемента, независимо от их содержимого.

Комментарии:

1. Вероятно, я должен был сказать «я не хочу делать больше работы для себя» вместо «я не могу это заменить». Тем не менее, ваш совет flexbox сработал отлично, спасибо.

Ответ №2:

Если вы используете фреймворк начальной загрузки, используйте класс начальной загрузки, а не создавайте свой собственный стиль.

Класс Nav и стиль начальной загрузки

 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">
    <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 class=""> 
    <div class="body-content">
		<div class="panel panel-body">
			<ul class="nav nav-pills">
				<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>
    

</body>