Как бы я создал четные границы для полей с неровным содержимым? - PullRequest
Новая
       0

Как бы я создал четные границы для полей с неровным содержимым?

0 голосов
/ 31 марта 2020

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

Я создание навигационных вкладок для вымышленного веб-сайта, причем вкладками являются «Меню», «Питание», «Заказ» и «Местоположения». Как вы можете видеть, каждая вкладка будет иметь разный размер, потому что содержание меняется. Я пытаюсь сделать границу для каждой вкладки, чтобы границы были одинаковой высоты и ширины для каждой, эффективно выстраиваясь в виде четырех конгруэнтных прямоугольников со словами внутри них. Код в HTML для этой части, с которой я работаю: 

<nav>
   <span><a href="#">MENU</a></span>
   <span><a href="#">NUTRITION</a></span>
   <span><a href="#">ORDER</a></span>
   <span><a href="#">LOCATIONS</a></span>
</nav>

Код, который у меня сейчас есть для CSS, который может повлиять на это: 

* {
  box-sizing: border-box;
}

, 

nav span {
  display: block;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 13px 0px;
}

и 

nav a {
  color: #666666;
  border: 1px solid rgb(202, 202, 202);
  padding: 1px;
  margin: 0px 3px;
}

Это итоговое визуальное изображение

Как бы я сделал так, чтобы границы для каждой вкладки были и совпадают ли они друг с другом?

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Вы хотите

  1. Дать элементы с границами (<a />) display: block;, что заставляет их занимать максимально доступное горизонтальное пространство
  2. Дать контейнер с блоки (<nav />) display: inline-block;, что позволяет контейнеру сжать содержимое
  3. Укажите родителя для <nav /> (в вашем примере HTML нет родителя, поэтому я предполагаю, что это <body />) text-align: center;, который центрирует <nav />, как в исходном коде.

Получившийся CSS будет выглядеть примерно так: 

* { box-sizing: border-box }
body { text-align: center }   /* Centers child inline content */
nav { display: inline-block } /* Shrink-to-fit content */

nav span {
    display: block;
    font-size: 16px;
    font-weight: 100;
    letter-spacing: 2px;
    margin: 13px 0px;
}

nav a {
    display: block; /* Take up maximum horizontal space */
    color: #666666;
    border: 1px solid rgb(202, 202, 202);
    padding: 1px;
    margin: 0px 3px;
}
0 голосов
/ 31 марта 2020 
* {
  box-sizing: border-box;
}

nav span {
  display: block;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 13px 0px;
  text-align: center;
}

nav a {
  color: #666666;
  border: 1px solid rgb(202, 202, 202);
  padding: 1px;
  margin: 0px 3px;
  text-decoration: none; 
  display: inline-block;  
}

https://codepen.io/stargroup0075/pen/MWwLxMd

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...