html - 水平列表不起作用

标签 html css twitter-bootstrap

我正在尝试使用 Bootstrap 水平列表,但它无法正常工作。我该如何解决这个问题?

我想得到这个:
example

目前,我有这个:
issue

这是我的代码:

.btn-xs, .btn-group-xs > .btn {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    width: 73px;
    height: 38px;
    background-color: #53585f;
    color: white;
    font-family: sans-serif;
}
  .btn-default:hover {

    background-color: #b89981;
    color: white;

}
ul.list-group:after {
  clear: both;
  display: block;
  content: "";
}

.list-group-item {
    float: left;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 73px;
}
.padding20 {
    padding : 10px;
}

.textbox {
    line-height: 24px;
}
.liststyle1 {
    margin: 0;
    list-style: none;
    margin-top: 10px;
    line-height: 28px;
    color: #309be8;}
<div class="container">
<h2>dsd</h2>
  <button type="button" class="btn btn-default btn-xs">Total</button>
         <button type="button" class="btn btn-default btn-xs">Check-Out</button>
           <button type="button" class="btn btn-default btn-xs">Check-In</button>
             <button type="button" class="btn btn-default btn-xs">Alerts</button>
               <button type="button" class="btn btn-default btn-xs">Tentative</button>


</div>

<div class="container list-top">
  <ul class="list-group">
    <li class="list-group-item">12Bookings
</li>
    <li class="list-group-item">Dapibus </li>
    <li class="list-group-item">Morbi</li>
    <li class="list-group-item">Porta</li>
    <li class="list-group-item">Vestib</li>
  </ul>
</div>

最佳答案

应用 flexbox 解决方案。我在此过程中清理了 CSS。

.btn-xs,
.btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border: none;
  width: 100%;
  height: 38px;
  background-color: #53585f;
  color: white;
  font-family: sans-serif;
  display: block;
}

.btn-default:hover {
  background-color: #b89981;
}

.list-group {
  display: flex;
  justify-content: flex-start;
}

.list-group-item>div {
  height: 38px;
  line-height: 38px;
}

.list-group-item {
  background-color: #fff;
  border: 1px solid #ddd;
  list-style: none;
  width: 100px;
  text-align: center;
}
<div class="container">
  <h2>dsd</h2>
</div>

<div class="container list-top">
  <ul class="list-group">
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Total</button>
      <div>12Bookings</div>
    </li>
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Check-Out</button>
      <div>Dapibus</div>
    </li>
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Check-In</button>
      <div>Morbi</div>
    </li>
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Alerts</button>
      <div>Porta</div>
    </li>
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Tentative</button>
      <div>Vestib</div>
    </li>
  </ul>
</div>

关于html - 水平列表不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44799854/

相关文章:

html - 使用百分比 `width:100%` 考虑元素 `float:left`

jquery - rel ="canonical"缺少结束斜杠

jquery - CSS 在浏览器中未处于事件状态时未更新?

html - bootstrap html等行间距

html - 使用 CSS 创建适当的布局(类似表格)

javascript - 我的 $(window).scroll 没有响应 (jQuery)

html - 在 CSS 中使用复选框 hack 时遇到问题

css - Bootstrap 和 body padding 左右

javascript - Bootstrap 2.2.1 提前输入

html - 防止CSS改变元素宽度