it-swarm.com.ru

Центр неупорядоченного списка в DIV

Во-первых, я знаю, что этот вопрос задавался МИЛЛИОНОВ раз ... и я специально изучил этот , а также несколько других на этом и других сайтах. Я попробовал множество различных вариантов каждого из них и до сих пор не могу заставить его работать.

Я пытаюсь центрировать неупорядоченный список. Отображается правильно, просто не по центру. На данный момент, это близко к центру ... но если вы измените параметр "width" в коде .nav-контейнера в CSS, то это сместит позицию div.

Вот мой CSS:

    html *{
  font-family: Verdana, Geneva, sans-serif;
}
body {
  padding:0px;
  margin:0px;
}
.nav-container {
  width:460px;  
  margin: 0 auto;
}
.nav-container ul {
  padding: 0px;
  list-style:none;
  float:left;
}
.nav-container ul li {
  display: inline;
}
.nav-container ul a {
  text-decoration:none;
  padding:5px 0;
  width:150px;
  color: #ffffff;
  background: #317b31;
  float:left;
  border-left: 1px solid #fff;
  text-align:center;
}
.nav-container ul a:hover {
  background: #92e792;
  color: black;
}
#add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
  color: #ffffff;
  background: #12b812;
}

И вот мой HTML:

<body id="admin">

<div id="header">
<center><h2>OMS Tutoring Database</h2></center>
</div>
<div class="nav-container">
<ul>
  <a class="tutor-button" href="tutoring.php"><li>Tutoring List</li></a>
  <a class="add-button" href="addform.php"><li>Add Students</li></a>
  <a class="admin-button" href="admin.php"><li>Admin</li></a>
</ul>
</div>

<div id="content"></div>

</body>

Я уверен, что это какая-то явно простая ошибка, но любая помощь будет высоко ценится. О, и я сейчас просматриваю его в Chrome, пока тестирую.

jsFiddle

15
Austin Dennis

Ваш HTML неверен. Теги <a> должны быть внутри тегов <li>. Чтобы элементы списка были встроенными, установите для них float: left, а overflow: hidden равным <ul>, чтобы он соответствовал его дочерним элементам. Удалите float из .nav-container, в этом нет необходимости. Посмотрите на это codepen .
И навигация перемещается, когда вы изменяете ее ширину, потому что вы центрировали обертку, но не саму навигацию. Вы можете удалить width и margin: 0 auto и попробовать:

.nav-container {
    text-align: center;
}
.nav-container ul {
    display: inline-block;
}
51
Angel Yan

Следующее решение немного улучшено:

   html * {
       font-family: Verdana, Geneva, sans-serif;
   }
   body {
       padding:0px;
       margin:0px;
   }
   .nav-container {
       width:460px;
       margin: 0 auto;
   }
   .nav-container ul {
       padding: 0px;
       list-style:none;
       float:left;
   }
   .nav-container ul li {
       display: inline;
   }
   .nav-container ul a {
       text-decoration:none;
       padding:5px 0;
       width:150px;
       color: #ffffff;
       background: #317b31;
       float:left;
       border-left: 1px solid #fff;
       text-align:center;
   }
   .nav-container ul a:hover {
       background: #92e792;
       color: black;
   }
   #add-form .add-button, #tutor-list .tutor-button, #admin .admin-button {
       color: #ffffff;
       background: #12b812;
   }


<div id="header">
    <center>
         <h2>OMS Tutoring Database</h2>
    </center>
</div>
<div class="nav-container">
    <ul>
         <li><a class="tutor-button" href="tutoring.php">Tutoring List</a></li>
         <li><a class="add-button" href="addform.php">Add Students</a>
         <li><a class="admin-button" href="admin.php">Admin</a></li>
    </ul>
</div>

Попробуйте это по адресу: http://jsfiddle.net/hg9qvL70/2/

0
ocupocus

Проблема заключалась в том, что вы назначали фиксированную ширину для ликов 150px. Вместо этого вам нужно было присвоить ширину 33%, а также присвоить ширине ul 100%, таким образом, независимо от того, какой размер у div, три li будут в центре идеально :)

Вот обновленный JSFIDDLE

.nav-container ul {
  padding: 0px;
  list-style:none;
  float:left;
  width: 100%
}
.nav-container ul li {
  display: inline;
}
.nav-container ul a {
  text-decoration:none;
  padding:5px 0;
  width:33%;
  color: #ffffff;
  background: #317b31;
  float:left;
  border-left: 1px solid #fff;
  text-align:center;
}
0
Reza Khadjavi