如何使用引导类对齐一行文本？

Question

null

.list-group-item{
  width: 165px;
  height: 32px;
  line-height: 1px;
  text-align: center;
margin-bottom: 1px;
margin-top: 58px;
    margin-left: 20px;
}

 <ul class="list-group" v-if="showSearchHistory">
        
            <li class="list-group-item" v-for="(item, index) in searchHistory.slice(-5).reverse().map(s => s.trim( ))"
            :key="index"
              @click="selectPreviousSearch(index)">{{ item }}</li>
          </ul>

null

我想将所有文本对齐在单行中（并排），而不是一个一个地对齐。（从li中，单击按钮时我将获得文本，)

Answer 1

这里是一个演示，是从本文中构建的css-tricks

null

Vue.createApp({
methods: {
   selectPreviousSearch(i) {
     console.log(i)
   }
 }
}).mount('#demo')

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

li {
  padding: 4px;
  cursor: pointer;
}

<script src="https://unpkg.com/vue@next"></script>

<div id="demo" class="demo">
  <ul  id="list-group">
    <li v-for="(n, index) in 5" @click="selectPreviousSearch(index)">
      {{ n }}
    </li>
  </ul>
</div>

Answer 2

ul.list-group-item{
  display: table;
  width: 100%;
  text-align: center;
}

ul.list-group-item> li {
  display: table-cell;
}

你能用这个选项吗？