Центрировать только средний

#html #css #html-lists

#HTML #css #html-списки

Вопрос:

Моя скрипка до сих пор: https://jsfiddle.net/dzjqor2d /

Я просто не могу переместить середину <li> в центр, что бы я ни пытался.

Мой код:

 ul {
  width: 60%;
  overflow: auto;
  background-color: #F5FAFF;
  padding: 20px;
}
ul li {
  list-style: none;
  float: left;
  padding: 10px 20px;
  background-color: #388CD1;
  color: #F5FAFF;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:last-child {
  float: right;
}

 <ul>
  <li>
    Empty cart
  </li>
  <li>
    Continue shopping
  </li>
  <li>
    Update cart
  </li>
</ul>

Примечание:

Содержимое является динамическим, как и ширина контейнера

1. добавьте сюда свой css

2. Вы хотите выровнять список?

3. Если вы можете использовать flex-box — проверьте эту ссылку — jsfiddle.net/3kyLk4rr

4. Возможно, вы захотите оставить свой комментарий в качестве ответа 🙂 @San

Ответ №1:

сделайте сначала li слева и последним справа, остальное будет float в соответствии ul с выравниванием текста:

 ul {
  width: 60%;
  overflow: auto;
  background-color: #F5FAFF;
  padding: 20px;
  text-align: center;
}

ul li {
  list-style: none;
  display:inline-block;
  padding: 10px 20px;
  background-color: #388CD1;
  color: #F5FAFF;
  position:relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

ul li:last-child{
  float:right;
}
ul li:first-child{
  float: left;
}

ДЕМОНСТРАЦИЯ

Ответ №2:

Вам не нужно перемещать последний li вправо, используйте поля для правильного выравнивания:

 ul li {
margin: 0 20px;
list-style: none;
float: left;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position:relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

https://jsfiddle.net/dzjqor2d/8/

1. Но что, если содержимое динамическое?

2. Вам понадобится что-то более надежное в зависимости от минимальной / максимальной длины содержимого и количества элементов списка! Приведенное выше решение с плавающей запятой подходит только для 3 li, но я бы использовал сеточную структуру, если она станет более динамичной (getskeleton — мой текущий фаворит для этого)

3. Правда, хотя вопрос был только для 3 элементов. Если бы там было больше, я бы использовал другой подход.

Ответ №3:

Вы можете попробовать использовать селектор CSS3 :nth-child() с вашим ul li тегом and

HTML

 <ul>
  <li>
    Empty cart
  </li>
  <li>
    Continue shopping
  </li>
  <li>
    Update cart
  </li>
</ul>

CSS

 ul {
  width: 60%;
  overflow: auto;
  background-color: #F5FAFF;
  padding: 20px;
  text-align:center;
}

ul li {
  list-style: none;
  display:inline-block;
  padding: 10px 20px;
  background-color: #388CD1;
  color: #F5FAFF;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:nth-child(1){
  float:left;
} 
ul li:nth-child(3){
  float:Right;
}

Ответ №4:

В наши дни flexbox — это путь, в прошлом плавающий был отличным, но сейчас не так много.

для UL того, что я добавил display: flex; , и justify-content: space-between; это означает; чтобы все они помещались в один блок, и если есть дополнительное пространство, просто поместите между ними пробел.

Вот посмотрите:

 body {
  margin: 0;
}
ul {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 40px);
  background-color: #F5FAFF;
  padding: 20px;
}
ul li {
  list-style: none;
  padding: 10px 20px;
  background-color: #388CD1;
  color: #F5FAFF;
  position: relative;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

 <ul>
  <li>
    Empty cart
  </li>
  <li>
    Continue shopping
  </li>
  <li>
    Update cart
  </li>
</ul>

Я изменил ширину, чтобы сделать пример более наглядным.

Надеюсь, это поможет.

Ответ №5:

Просто используйте приведенный ниже css для ul:

ul {ширина: 70%; переполнение: автоматическое; цвет фона: #F5FAFF;отступ: 20 пикселей; дисплей: гибкий;}