Question

在我的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规则？谢谢

Answer 1

这应该可以解决问题

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

Answer 2

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

或float:left;也可以。

Answer 3

您可以添加以下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;
 }

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

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

HTML / CSS：如何将<li>中的所有<li>放在同一行并居中

4 个答案: