面板页脚内的水平列表

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

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

Answer 2

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

.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;
}

将class行添加到第二行

Answer 3

请将以下样式添加到您的样式中 sheet。

.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 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>

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

面板页脚内的水平列表

Horizontal list inside panel-footer

html

css

horizontallist

twitter-bootstrap