Ширина элемента при преобразовании: translate () - PullRequest
Новая
       4

Ширина элемента при преобразовании: translate ()

0 голосов
/ 09 декабря 2018

Я абсолютно позиционирую список ul (но это может быть любой элемент) внизу в центре контейнера.При изменении размера окна или контейнера список сжимается, как если бы где-то применялись какие-то поля, отступы или максимальная ширина.См. эту скрипку .

Желаемый эффект Мне нужен список, чтобы сохранить автоматическую ширину (в зависимости от его содержимого) и сжиматься только тогда, когда он занимает более 100%ширина родительского элемента.

Я заметил, что такое поведение происходит, только когда transform: translateX (-50%).

EDIT Div оболочки содержит другие элементы.Список действует как навигационное меню или набор инструментов.

HTML 

<div id="wrapper">

  <p>Whatever other content</p>

  <ul id="list">
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
  </ul>
</div>

CSS 

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  background: #fff;
}

#list {
  list-style: none;
  position: absolute;
  padding: 2px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0;
  background: #555;
}

#list li {
  display: inline-block;
  margin: 1px;
}

#list span {
  display: block;
  height: 40px;
  width: 40px;
  background: #222;
}

1 Ответ

0 голосов
/ 09 декабря 2018

Вы можете использовать flexbox, чтобы заменить старый абсолютный способ позиционирования.

#wrapper {
  background: #fff;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
}
#list {
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: flex-end;
  margin: 0 auto;
  border: 1px solid #222;
}

Я обновил скрипку http://jsfiddle.net/uLj5raoq/

...