Как выровнять элемент li в зависимости от левого и правого элемента в панели навигации - PullRequest
Новая
       8

Как выровнять элемент li в зависимости от левого и правого элемента в панели навигации

0 голосов
/ 14 января 2020

Я хочу выровнять элемент между двумя плавающими <li>

У меня есть следующее: 

ul > li {
    display: inline-block;
    display:inline;
}

ul{
  text-align: center
}

#left{
  float: left
}

#right{
  float: right
}

#mid{
    margin-left: auto;
    margin-right: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
  <ul id="list_navbar" class="nav navbar-nav">
    <li id="left">LEFT</li>
    <li id="right">RIGHT</li>
    <li id="mid">MID</li>
  </ul>
</nav>

Средний элемент не центрируется на большом экране, но когда я удаляю класс nav navbar-nav из <ul> элементов: 

ul > li {
    display: inline-block;
    display:inline;
}

ul{
  text-align: center
}

#left{
  float: left
}

#right{
  float: right
}

#mid{
    margin-left: auto;
    margin-right: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
  <ul id="list_navbar">
    <li id="left">LEFT</li>
    <li id="right">RIGHT</li>
    <li id="mid">MID</li>
  </ul>
</nav>

Как выровнять, не удаляя класс?

Ответы [ 2 ]

1 голос
/ 14 января 2020

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

Так что прямой ответ может быть следующим: 

ul{
  display: flex;
  justify-content: space-between;
}

justify-content: space -ween; Правило будет делать то, что вы хотите, и установить как можно больше пространства между вашими ли. Это будет сделано по порядку ваших li, поэтому вам нужно отредактировать ваш код и установить средний в середине вашей структуры li.

Обновлено с фрагментом 

ul {
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
  <ul id="list_navbar">
    <li>LEFT</li>
    <li>MID</li>
    <li>RIGHT</li>
  </ul>
</nav>

Обратите внимание, что по умолчанию в элементах UL есть отступ, который я удалил в этом фрагменте. Я также удалил все другие идентификаторы, которые вы использовали для li, так как они не нужны для того, чтобы это работало должным образом.

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

1 голос
/ 14 января 2020

вы можете попробовать это. здесь какой-то bootstrap код взят за вычетом поля .. теперь у нас есть очень хороший код .navbar-nav

css

ul > li {
    display: inline-block;
    display:inline;
}

ul{
  text-align: center
}

#left{
  float: left
}

#right{
  float: right
}

#mid{
    margin-left: auto;
    margin-right: auto;
}
.navbar-nav{
  width:100%;
  margin: 7.5px 0px !important;
}
...