水平列表不起作用

Question

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

我试图得到这个：

目前，我有这个：

这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

应用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>

Answer 2

简单的解决方案：只需尝试将float: left;放到按钮

<强> LIKE

.btn-xs, .btn-group-xs > .btn {
    /* your code goes here */
    float: left;
}

Answer 3

尝试此样式表...我对您的代码进行了一些更改....

 <style type="text/css">
      .btn-xs, .btn-group-xs > .btn {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
        width: 77px;
        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 2px;
        margin-bottom: -1px;
        background-color: #fff;
        border: 1px solid #ddd;
        width: 80px;
    }
    .padding20 {
        padding : 10px;
    }

    .textbox {
        line-height: 24px;
    }
    .liststyle1 {
        margin: 0;
        list-style: none;
        margin-top: 10px;
        line-height: 28px;
        color: #309be8;}
    </style>