Question

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

我一直在尝试使用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

Answer 1

您可以将justify-content: space-around与CSS3灵活的框布局结合使用。这正是你所需要的，在两端极端分隔出带边距的列表项。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

以下是代码：

HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

使用flexbox：

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

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

4 个答案: