Как разместить html-элементы одинаково далеко от их центра с помощью css

ProgramBox

Как разместить html-элементы одинаково далеко от их центра с помощью css

Post author:admin
Запись опубликована:3 ноября, 2022
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я только начинаю с WebDev, поэтому извините, если это тривиально. Я ищу способ равномерно разместить ссылки на моей панели навигации, независимо от их длины. Так что, независимо от длины текста каждой ссылки, для 5 ссылок 3-я ссылка всегда идеально центрируется на странице.

Пока все, что я нашел, занимает одинаковое пространство между каждой ссылкой. Вот мой код (упрощенный):

 /*-----------------------Original Code-------------------------*/
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    color: black;
}
.bar {
    width: 100%;
    background-color: grey;
    display: flex;
    justify-content: center;
}
.links {
    justify-content: center;
    display: flex;
}
.links li {
    margin: 1em 2em 1em 2em;
}

/*-------------------Solution to my Problem---------------------*/
.links {
    /*set width to 100%, otherwise it's somehow smaller */
    width: 100%;
}
.links li {
    /*removed margin at the side, as it is now spaced with flex*/
    margin: 1em 0em 1em 0em;

    /*make all li the same size*/
    flex: 1;

    /* keep the text from wrapping and hide overflow,
    otherwise it would change the layout, by expanding to fit the li*/
    white-space: nowrap;
    overflow:hidden;

    /*align the Links within the li*/
    text-align: center;
}

 <!DOCTYPE html>
<html>
<head>
    <title>Problem</title>
</head>
<body>
    <div class="bar">
        <ul class="links">
            <li>
                <a href="#">Text</a>
            </li>
            <li>
                <a href="#">Longer Text</a>
            </li>
            <li>
                <a href="#">#</a>
            </li>
            <li>
                <a href="#">Even Longer Text</a>
            </li>
            <li>
                <a href="#">The Longest Text in the List</a>
            </li>
        </ul>
    </div>
</body>
</html>

Развернуть фрагмент

1. Не уверен, что вы подразумеваете под равным расстоянием. Если их 5, а 3-й всегда должен быть центрирован посередине, то расстояние между элементами, вероятно, должно отличаться, если тексты имеют разную длину. Не могли бы вы уточнить.

2. Чтобы уточнить: я хочу, чтобы произвольное количество ссылок отображалось рядом друг с другом. Расстояние между их средними линиями должно быть одинаковым. (5 был просто примером, потому что его легко визуализировать при неравномерном количестве ссылок)

Ответ №1:

Если вы не хотите использовать другие элементы, такие как table, то я использовал Flex, поэтому третий div всегда будет в центре, потому что всего 5 divs.

 <!DOCTYPE html>
<html>
  <head>
    <title>Problem</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        color: black;
      }
      .bar {
        background-color: grey;
        display: flex;
        justify-content: space-between;
      }
      .links {
        display: flex;
        flex-direction: row;
        width: 100%;
      }
      .links li {
        margin: 1em 2em 1em 2em;
        width: 100%;
      }

      .link1 {
        flex: 1;
      }
      .link2 {
        flex: 1;
      }
      .link3 {
        flex: 2;
      }
      .link4 {
        flex: 1;
      }
      .link5 {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="bar">
      <ul class="links">
        <li class="link1">
          <a href="#">Text</a>
        </li>
        <li class="link2">
          <a href="#">Longer Text</a>
        </li>
        <li class="link3">
          <a href="#">#</a>
        </li>
        <li class="link4">
          <a href="#">Even Longer Text</a>
        </li>
        <li class="link5">
          <a href="#">The Longest Text in the List</a>
        </li>
      </ul>
    </div>
  </body>
</html>

1. Я думаю, это то, что я искал. Настройка ширины .links и настройки flex: 1; для .links ul . Можете ли вы объяснить, почему вы использовали flex: 2; среднюю ссылку? Разве это не увеличит его размер в 2 раза по сравнению с остальными?

2. Также: возможно ли иметь тот же макет, но расширить ссылки, если они больше и еще осталось место?. Потому что эта версия просто устанавливает для всех li одинаковый размер (что нормально, но если одна ссылка очень большая, а другая очень маленькая, большая вырезается, в то время как было бы место для дальнейшего расширения)

3. Я установил ширину на 100%. У вас всего 5 ссылок, это означает, что они должны иметь общую ширину по 20% каждая, но когда один из них получает flex-2 , это означает, что он получит ширину 40%, а у других будет 15%. Потому что они будут иметь общую ширину 100%. Для получения дополнительной информации, пожалуйста, ознакомьтесь с Flex MDM

4. Я просто указывал, что flex: 2 по одной ссылке они не будут размещаться одинаково, не понимая сути моего вопроса. Кроме того, разве это не составило бы 33,3%, а остальные 16,7%? Мой ответ звучит довольно грубо, это не было предназначено. Спасибо за помощь.

5. хм, если вы хотите, чтобы они были равны, можете ли вы проверить эту ссылку и дать мне знать? Код в песочнице

Ответ №2:

Просто добавьте свойство выравнивания текста в стиле ссылки

 .links {
justify-content: center;
display: flex;
text-align: center;

}

Ответ №3:

Самый простой и короткий способ добиться этого — использовать CSS-grid . Тогда вам даже не нужно использовать список. Вы разделяете панель навигации на 5 равных столбцов с grid-template-columns: repeat(5, 1fr); помощью . Таким образом, центральный столбец также всегда будет оставаться в центре.

 .bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
}

/* For demonstration only */
.demo-scale {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  text-align: center;
  border: 1px solid black;
  margin-top: 10px;
}

.demo-scale div {
  padding: 5px 0;
}

.demo-scale div:nth-child(even) {
  color: red;
  background-color: white;
}

.demo-scale div:nth-child(odd) {
  color: white;
  background-color: red;
}

 <div class="bar">
  <a href="#">Text</a>
  <a href="#">Longer Text</a>
  <a href="#">#</a>
  <a href="#">Even Longer Text</a>
  <a href="#">The Longest Text in the List</a>
</div>

<!-- For demonstration only -->
<div class="demo-scale">
  <div>10%</div>
  <div>20%</div>
  <div>30%</div>
  <div>40%</div>
  <div>50%</div>
  <div>60%</div>
  <div>70%</div>
  <div>80%</div>
  <div>90%</div>
  <div>100%</div>
</div>

Развернуть фрагмент

1. Как это масштабируется для произвольного количества ссылок? Мне кажется, что мне придется вручную настраивать столбцы

2. ну, вы можете либо использовать JS для подсчета элементов, либо установить количество столбцов сетки в соответствии с ним. Или вы можете использовать значение в 3 столбца, где вам нужно объявить ссылки либо слева, либо справа от центра, а также указать, какой элемент должен быть центрирован

3. Спасибо за ваш ответ, но flex: 1; для .links li того, чтобы сделать трюк и проще

Ответ №4:

Если я вас правильно понял, я думаю, вы можете использовать a <table> вместо <ul> со table-layout: fixed; стилем

 * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            color: black;
        }
        .bar {
            width: 100%;
            background-color: grey;
            display: flex;
            justify-content: center;
        }
      
        table {
        table-layout: fixed;
        width: 100%;
        text-align: center; 
        }

 <!DOCTYPE html>
<html>
<head>
    <title>Problem</title>
</head>
<body>
    <div class="bar">
      <table>
      <tr>
      <td><a href="#">Text</a></td>
      <td><a href="#">Long Text</a></td>
      <td><a href="#">#</a></td>
      <td><a href="#">123</a></td>
      <td><a href="#">5346423</a></td>
      </tr>
      </table>
    </div>
</body>
</html>

Развернуть фрагмент

1. не используйте таблицу для целей стилизации. Таблицы должны использоваться только для отображения данных. Для целей стилизации используйте flexbox или css-grid, которые являются современными решениями и имеют несколько преимуществ перед таблицами. Например, разрешить полную повторяемость с измененным макетом для мобильного использования (медиа-запросы, области шаблонов сетки, гибкий порядок …)