HTML/CSS：如何将 <ul> 中的所有 <li> 放在同一行并居中 [重复]答案

【问题标题】：HTML/CSS: how to put all <li> in <ul> on the same line and centered [duplicate]HTML/CSS：如何将 <ul> 中的所有 <li> 放在同一行并居中 [重复]
【发布时间】：2016-04-30 00:39:06
【问题描述】：

在我的 wordpress 网站中，我在网站顶部的页面中有以下代码，用作主菜单：

<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#locali">
        <img id="loc" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/locali.png" height="64" width="64"/> 
        <span id="loc-span">Locali</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#laboratorio">
        <img id="lab" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/muffin.png" height="64" width="64"/> 
        <span id="lab-span">Laboratorio</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#servizi">
        <img id="serv" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/cutlery.png" height="64" width="64"/> 
        <span id="serv-span">Servizi</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#diconodinoi">
        <img id="about" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/aboutus.png" height="64" width="64"/> 
        <span id="about-span">Dicono di noi</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#photogallery">
        <img id="pic" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/gallery.png" height="64" width="64"/> 
        <span id="pic-span">Photo Gallery</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#contatti">
        <img id="loc" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/location.png" height="64" width="64"/> 
        <span id="loc-span">Contatti</span>
    </a>
</li>

产生以下结果：

如您所见，我希望所有图标位于同一行并居中。我需要哪些 CSS 规则？谢谢

【问题讨论】：

标签： html css html-lists

【解决方案1】：

这应该可以解决问题

<style>
  ul li{display: inline;}
  ul {text-align: center;}
</style>

【讨论】：

谢谢你的朋友，但我担心它不起作用......也许有一些与主题形成对比的东西
那么你必须显示实际应用于列表@LoryLory的css

【解决方案2】：

您可以添加以下 css 规则。

 .gk-short-menu {text-align: center;}
 .gk-short-menu li {
  display: inline-block;
  margin-right: 5px;
 }
.gk-short-menu span {
 display: block; 
 text-align: center;
 }

该规则将使您的内容居中并在同一行中...

【讨论】：

谢谢你，但我担心它不起作用......也许有一些与主题形成对比的东西
这可能是我们没有正确定位我们的元素。您应该正确定位您的元素，以便它可以采用样式，并且一旦采用样式，它将按照您的意愿很好地显示。
这里的代码与 jsfiddle 中的代码相同，并且工作正常 [link]jsfiddle.net/tegs8L55 所以现在唯一的问题是您的元素定位。正确定位你的元素，它会很好地为你工作。
我已经更新了我的解决方案中的代码，现在它工作正常，您可以使用该代码并在 JSFIDDLE 中检查结果

【解决方案3】：

您可以尝试将display:inline-block; 添加到 li 元素中。

或者float:left; 也可以。

【讨论】：

效果很好，但它们没有在页面中心对齐...
ul { 边距：0 自动； }
还是同样的问题...而且最后一个图标比前5个要多一点...

【解决方案4】：

你可以试试用 flexbox 来做

li a{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  margin: auto;
}
ul{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 0px;
}

<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#locali">
        <img id="loc" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/locali.png" height="64" width="64"/> 
        <span id="loc-span">Locali</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#laboratorio">
        <img id="lab" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/muffin.png" height="64" width="64"/> 
        <span id="lab-span">Laboratorio</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#servizi">
        <img id="serv" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/cutlery.png" height="64" width="64"/> 
        <span id="serv-span">Servizi</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#diconodinoi">
        <img id="about" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/aboutus.png" height="64" width="64"/> 
        <span id="about-span">Dicono di noi</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#photogallery">
        <img id="pic" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/gallery.png" height="64" width="64"/> 
        <span id="pic-span">Photo Gallery</span>
    </a>
</li>
<li data-scroll-reveal="enter bottom over .5s after .5s">                     
    <a href="#contatti">
        <img id="loc" src="http://www.pasticceriaimpero.com/wordpress/wp-content/uploads/2016/04/location.png" height="64" width="64"/> 
        <span id="loc-span">Contatti</span>
    </a>
</li>

【讨论】：