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

我试图编写响应网站的主页，以便在附加图像中水平排列三个文本框。文本应该均匀分布并居中整个网站的宽度。均匀间隔和居中文本的水平列表

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

来源

2015-11-02 grazza1977

查找到'显示：table' /'显示：表cell'旧版浏览器的布局，新版的flexbox。两者都应该达到你正在寻找的结果。 –

非常感谢杰西。会做。 – grazza1977

您可以使用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>

来源

2015-11-02 17:11:48

您还需要针对<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>

来源

2015-11-02 17:11:31 Jase

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

来源

2015-11-02 17:12:28 Oriol

我将在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>

来源

2015-11-02 17:22:09

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

回答

相关问题