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中，单击按钮时我将获得文本，)
ul.list-group-item{
display: table;
width: 100%;
text-align: center;
}
ul.list-group-item> li {
display: table-cell;
}
你能用这个选项吗？
这里是一个演示，是从本文中构建的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>