具有均匀间隔和居中文本的水平列表答案

【问题标题】：Horizontal list with evenly spaced and centered text具有均匀间隔和居中文本的水平列表
【发布时间】：2015-11-03 01:22:09
【问题描述】：

我正在尝试将响应式网站的主页编码为水平排列的三个文本框，如附图所示。文本应在整个网站宽度上均匀分布并居中。

我一直在尝试使用 ul 和 display: inline 命令。我认为这应该很容易，但我已经尝试了几个小时并且无法解决。这是 HTML：

<ul id="promolist">
<li>NEW! GO IN STORE</li>
<li>0% FINANCE APPLY ONLINE</li>
<li>FREE DELIVERY ON ORDERS OVER &pound;50</li>
</ul>

如果有人可以帮助我处理 CSS，我将不胜感激。干杯。

Image showing expected result

【问题讨论】：

查看display:table/display:table-cell 旧版浏览器的布局，新版浏览器的flexbox。两者都应该达到您想要的结果。
非常感谢杰西。会的。

标签： html css

【解决方案1】：

您可以将justify-content: space-around 与 CSS3 灵活的框布局一起使用。这正是您所需要的，将列表项均匀地隔开，两端有边距。

#promolist {
  display: flex;
  justify-content: space-around;
  list-style: none;
}

<ul id="promolist">
  <li>NEW! GO IN STORE</li>
  <li>0% FINANCE APPLY ONLINE</li>
  <li>FREE DELIVERY ON ORDERS OVER &pound;50</li>
</ul>

【讨论】：

【解决方案2】：

我将添加 display: table, display: table-cell 示例，因为 flexbox 已经很好地涵盖了。有点过时的技术，但具有兼容 IE8 的优势（如果这是你的事）：

#promolist {
  display: table;
  table-layout: fixed; /*force equal column width */
  width: 100%;
  padding: 0;
  margin: 0;
}

#promolist li {
  display: table-cell;
  padding: 10px;
 
  vertical-align: middle;
  text-align: center;
 
  border-left: solid 1px #000;
}

#promolist li:first-child {
  border-left: none;  
}

<ul id="promolist">
  <li>NEW! GO IN STORE</li>
  <li>0% FINANCE APPLY ONLINE</li>
  <li>FREE DELIVERY ON ORDERS OVER &pound;50</li>
</ul>

【讨论】：

【解决方案3】：

您还需要定位<li> 元素。看看这个 jsfiddle：

https://jsfiddle.net/2L99k5ko/2/

代码如下：

HTML：

ul#promolist li {
    display: inline;
    padding: 20px;
}

<ul id="promolist">
    <li>NEW! GO IN STORE</li>
    <span>|</span>
    <li>0% FINANCE APPLY ONLINE</li>
    <span>|</span>
    <li>FREE DELIVERY ON ORDERS OVER &pound;50</li>
</ul>

【讨论】：

【解决方案4】：

使用弹性框：

#promolist {
  display: flex; /* Magic begins */
  padding: 0;
  list-style: none;
}
#promolist > li {
  flex: 1; /* Equal widths, covering all the container */
  text-align: center; /* Center inner text horizontally */
}

<ul id="promolist">
  <li>NEW! GO IN STORE</li>
  <li>0% FINANCE APPLY ONLINE</li>
  <li>FREE DELIVERY ON ORDERS OVER &pound;50</li>
</ul>

【讨论】：