Question

出于某些原因，我已经坚持了很长一段时间。

我正在设置一个bootstrap 3布局，我想根据我的要求设置一个面板页脚样式。不幸的是，我很难在页脚中放置一个水平ul，每个li都有中心对齐的文本。

这是当前的代码：

    h1 {
      font-size: 26px;
      font-weight: bold;
      margin: 5px;
      font-family: "Verdana";
    }
    h3 {
      text-transform: uppercase;
      font-size: 16px;
      font-weight: bold;
      font-family: "Arial";
      margin-top: 5px;
      margin-bot: 10px;
    }
    .trip-stats-list {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .trip-stats-list ul li {
      display: inline;
      border: 1px;
    }
    .panel-footer ul li h1 {
      font-size: 32px;
      color: #ff530d;
      text-align: center;
    }
    .panel-footer ul li h3 {
      font-size: 14px;
      text-align: center;
    }

<div class="panel-footer">
  <ul class="trip-stats-list">
    <li>
      <h1>422</h1>
      <h3>photos</h3>
    </li>
    <li>
      <h1>14</h1>
      <h3>places</h3>
    </li>
  </ul>
</div>

这就是我想要的：

Answer 1

使用您的代码，您只需添加：

.panel-footer ul li {
   display: inline-block;
}

.panel-footer {
       text-align: center;
    }

这会使li显示在彼此旁边。

如果你想在中间添加这一行，你可以做下一件事：

HTML

<li class="line">
  <h1>14</h1>
  <h3>places</h3>
</li>

CSS

.line {
    border-left: 1px solid black;
    padding-left: 10px;
}

将类行添加到第二个li

中

Answer 2

请将以下样式添加到样式表中。

.panel-footer ul li {
   display: inline-block;
   border: 1px;
   border-left:1px solid black;
   padding: 0 26px;}
.panel-footer ul li:first-child{
    border:none;}

Answer 3

我将如何做到这一点是将您的代码包装在导航栏中，并使用它来创建一个水平列表（但可能有更好的方法）。要做到这一点，只需创建一个＆＃34; nav＆＃34; class＆＃34; navbar＆＃34;的对象，并将所有代码包装在其中。抱歉，我对HTML很新，所以可能有更好的方法来做到这一点，但我认为这种方式非常简单，如果您决定将每个部分分开，那将会很好链接。我知道W3学校有一个关于用HTML创建导航栏的非常好的教程。 http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Answer 4

最后，我不得不失去ul形成以获得我需要的响应能力。

这是最终代码（与bootstrap的网格类一起）获取此处所需的视觉效果。

.col-xs-6 {
  width: 50%;
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
}

h1 {
  font-size: 26px;
  font-weight: bold;
  margin: 5px;
  font-family: "Verdana";
}
h3 {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  font-family: "Arial";
  margin-top: 5px;
  margin-bot: 10px;
}
.panel-footer {
  text-align: center;
}
.panel-footer h1 {
  font-size: 32px;
  color: #ff530d;
}
.panel-footer h3 {
  font-size: 14px;
}

.col-xs-6 {
  border-left: 1px solid black;
}

.col-xs-6:first-child {
  border: 0px;
}

<div class="panel-footer">
  <div class="row">
    <div class="col-xs-6">
      <h1>422</h1>
      <h3>photos</h3>
    </div>
    <div class="col-xs-6">
      <h1>14</h1>
      <h3>places</h3>
    </div>
  </div>
</div>

很抱歉拒绝了一些非常好的答案，但我的规格很严格。谢谢大家的时间！

面板页脚内的水平列表

4 个答案: