如何使列表水平

Question

我需要让我的列表在我的网页中心显示为水平。

这是我的代码：

.list-group {
   clear: both;
   display: inline-block;
   content: "";
   padding-right: 50px;
   padding-left: 50px;
}

<div>
  <ul class="list-group">
    <li class="list-group-item">Home</li>
    <li class="list-group-item">About Us</li>
    <li class="list-group-item">Gallery</li>
    <li class="list-group-item">Contact Us</li>
    <li class="list-group-item">Students ePortal</li>
  </ul>
</div>

我尝试了上面的代码，但它没有用。

Answer 1

它的display: table;可以完成工作。

#menu-outer {
  height: 84px;
}

.table {
  display: table; /* Allow the centering to work */
  margin: 0 auto;
}

ul#list-group {
  min-width: 696px;
  list-style: none;
  padding-top: 20px;
}

ul#list-group li {
  display: inline;
}

<div id="menu-outer">
  <div class="table">
    <ul id="list-group">
      <li class="list-group-item">Home</li>
      <li class="list-group-item">About Us</li>
      <li class="list-group-item">Gallery</li>
      <li class="list-group-item">Contact Us</li>
      <li class="list-group-item">Students ePortal</li>
    </ul>
  </div>
</div>

Answer 2

试试这个：

.list-group {
  list-style: none;
}
.list-group-item {
  display: inline;
}

<div id="menu">
  <ul class="list-group">
    <li class="list-group-item">Home</li>
    <li class="list-group-item">About Us</li>
    <li class="list-group-item">Gallery</li>
    <li class="list-group-item">Contact Us</li>
    <li class="list-group-item">Students ePortal</li>
  </ul>
</div>

Answer 3

使用margin: 0 auto将容纳菜单的容器置于中心位置，使用float或display:inline以内嵌方式显示菜单项。

div {
 width: 80%;
 margin: 0 auto;
 min-width: 720px;
}

ul {
  list-style: none;
}

li {
  float: left;
  padding: 0 5%;
  border: 1px solid black;
}

<div>
  <ul class="list-group">
    <li class="list-group-item">Home</li>
    <li class="list-group-item">About Us</li>
    <li class="list-group-item">Gallery</li>
    <li class="list-group-item">Contact Us</li>
    <li class="list-group-item">Students ePortal</li>
  </ul>
</div>

Answer 4

这是你需要的吗？请看一下这个

.menu {
  float: left;
  width: 100%;
}
.menu ul{
  margin: 0;
  padding: 0;
  text-align:center;
}
.menu ul li {
  list-style: none;
  display: inline-block;
  padding: 5px;
}

<div class="menu">
<ul>
  <li class="list-group-item">Home</li>
  <li class="list-group-item">About Us</li>
  <li class="list-group-item">Gallery</li>
  <li class="list-group-item">Contact Us</li>
  <li class="list-group-item">Students ePortal</li>
</ul>
</div>

Answer 5

＆＃13;

＆＃13;

.list-group {
    text-align: center;
}
.list-group-item {
    display: inline-block;
}

＆＃13;

<div>
  <ul class="list-group">
    <li class="list-group-item">Home</li>
    <li class="list-group-item">About Us</li>
    <li class="list-group-item">Gallery</li>
    <li class="list-group-item">Contact Us</li>
    <li class="list-group-item">Students ePortal</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

试试这个css：

.list-group {
   text-align: center;
}
.list-group-item {
   display: inline-block;
}