2016-11-30 33 views
1

我想水平居中的自定义导航栏菜单:中心定制导航栏菜单水平

<ul class="topnav" id="myTopnav" > 
    <li><a href="index.html"><img class="img-responsive" width="60px" src="imagenes/botones/logo_hera.png" /></a></li> 
    <li><a href="doctores.html"><img class="img-responsive" width="180px" src="imagenes/botones/doctores_boton.png" /></a></li> 
    <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/hospitales_boton.png" /></a></li> 
    <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/farmacias_boton.png" /></a></li> 
    <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/laboratorios_boton.png" /></a></li> 

    <li class="icon"> 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
    </li> 
</ul> 

CSS:

/* Remove margins and padding from the list, and add a black background color */ 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 10px; 
    width: 100%; 
    display: inline-block; 


} 

/* Float the list items side by side */ 
ul.topnav li {float: left; 
    margin: 10; 
    padding: 10; 

    } 

/* Style the links inside the list items */ 
ul.topnav li a { 
    display: inline-block; 
    color: #f2f2f2; 
    text-align: center; 

    padding: 14px 16px; 
    text-decoration: none; 
    transition: 0.3s; 
    font-size: 40px; 


} 

但它在屏幕的左侧所示,

编辑:

enter image description here

+0

凡列表放置?你能提供HTML上下文吗? – sinisake

+0

@nevermind它是标签中唯一的内容。 – mvasco

+0

@mvasco你已经提到浮在李..ul.topnav李{浮法:左;如果可能请提供您的小提琴 –

回答

1

的问题是,你是使用浮动左,这同时使具有在水平行中列出的列表项的期望的效果,它使他们成为浮动到左侧。相反,你应该使用:'display:inline',它做同样的事情,但没有浮动到左边。

这里是jsfiddle:https://jsfiddle.net/chris2001/Lc57jw4c/1/与工作的答案。 :)

ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    padding: 10px; 
    width: 100%; 
    text-align: center; 
} 

/* Float the list items side by side */ 
ul.topnav li { 
    /* float: left; */ 
    margin: 10; 
    padding: 10; 
    display: inline; 
    /* text-align: center; */ 

    } 
+0

它的工作原理,谢谢 – mvasco

+0

欢迎。很高兴我可以帮助:) – Chri

+0

请看看我的其他问题,尚未解答:http://stackoverflow.com/questions/40879955/navbar-icon-not-showing-in-some-browsres – mvasco

1

/* Remove margins and padding from the list, and add a black background color */ 
 
ul.topnav { 
 
    display: inline-table; 
 
    margin: 0; 
 
    padding: 10px; 
 
    list-style-type: none; 
 
} 
 
.links{ 
 
    text-align: center; 
 
}  
 
/* Float the list items side by side */ 
 
ul.topnav li {float: left; 
 
    margin: 10px; 
 
    padding: 10px; 
 

 
} 
 

 
/* Style the links inside the list items */ 
 
ul.topnav li a { 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 40px; 
 
}
<div class="links"> 
 
      <ul class="topnav" id="myTopnav" > 
 
      <li><a href="index.html"><img class="img-responsive" width="60px" src="imagenes/botones/logo_hera.png" /></a></li> 
 
      <li><a href="doctores.html"><img class="img-responsive" width="180px" src="imagenes/botones/doctores_boton.png" /></a></li> 
 
      <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/hospitales_boton.png" /></a></li> 
 
      <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/farmacias_boton.png" /></a></li> 
 
      <li><a href="#news"><img class="img-responsive" width="180px" src="imagenes/botones/laboratorios_boton.png" /></a></li> 
 
      <li class="icon"> 
 
      <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
      </li> 
 
     </ul> 
 
     </div>

在代码稍加修改。在整页中查看结果。

+0

谢谢你,但你的建议不起作用 – mvasco

1

根据您的需要尝试调整边距和填充。 如果您有任何topnav父元素,然后使用align属性。

ul.topnav { 
    list-style-type: none; 
    margin: 2% auto ; 
    padding: 15% auto; 
    width: 100%; 
    display: inline-block; 
} 
+0

谢谢,但你的建议不起作用 – mvasco

1

使用display: inline-block,而不是float: left你的链接元素(ul.topnav li),并添加text-align: centerul.topnav应该这样做。

/* Remove margins and padding from the list, and add a black background color */ 
 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 10px; 
 
    width: 100%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
/* Float the list items side by side */ 
 
ul.topnav li { 
 
    display: inline-block; 
 
    margin: 10; 
 
    padding: 10; 
 
} 
 

 
/* Style the links inside the list items */ 
 
ul.topnav li a { 
 
    display: inline-block; 
 
    color: #f2f2f2; 
 
    text-align: center; 
 

 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    transition: 0.3s; 
 
    font-size: 40px; 
 
}
<ul class="topnav" id="myTopnav" > 
 
    <li><a href="index.html"><img class="img-responsive" width="60px" src="https://dummyimage.com/60x60/000/fff" /></a></li> 
 
    <li><a href="doctores.html"><img class="img-responsive" width="180px" src="https://dummyimage.com/180x180/000/fff" /></a></li> 
 
    <li><a href="#news"><img class="img-responsive" width="180px" src="https://dummyimage.com/180x180/000/fff" /></a></li> 
 
    <li><a href="#news"><img class="img-responsive" width="180px" src="https://dummyimage.com/180x180/000/fff" /></a></li> 
 
    <li><a href="#news"><img class="img-responsive" width="180px" src="https://dummyimage.com/180x180/000/fff" /></a></li> 
 

 
    <li class="icon"> 
 
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a> 
 
    </li> 
 
</ul>

+0

谢谢,但对我的问题有一个答案 – mvasco