投稿
  1. 边看边学首页
  2. 文章

Men ev it:Cómocentroestemenúdesplegable(下拉菜单)

作者：史黛妃 • • 阅读 5

您将学习如何使用本教程。dropdown。Y estoy tratando de aplicar por mi cuenta c ó digo CSS que me permita centrar en la pagina,el men ú horized.Sin barbal no he podido hacerlo.

您可以使用 CSS 和 HTML 来创建一个新的...

nav {
display:block;
margin: 0 auto 20px;
border: 1px solid #222;
position: relative;
background-color: #FBE080;
font: 16px Tahoma, sans-serif;
}
nav ul {
padding:0;
margin: 0;
    
    text-align: center;
}
nav ul:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
nav li {
position: relative;
float: left;
list-style-type: none;
}
nav li a{
display:block;
padding: 10px 20px;
border-left: 1px solid #999;
border-right: 1px solid #222;
color: #000;
text-decoration: none;
}
nav li a:focus{
outline: none;
text-decoration: underline;
}
nav li:firt-child a{
border-left: none;
}
nav li.ultimo a {
border-right: none;
}
nav li:hover ul {
display: block;
}
nav a span { 
    display: block; 
    float: right; 
    margin-left: 5px; 
}
nav ul a span { 
    -moz-transform:rotate(-180deg);
    -webkit-transform:rotate(-180deg);
    transform: rotate(-180deg);
}
nav ul ul { 
    display: none; 
    width: 100%; 
    position: absolute; 
    left: 0; 
    background: #FDEDB2; 
}
nav ul ul li { 
    float: none; 
}
nav ul ul a { 
    padding: 5px 10px; 
    border-left: none; 
    border-right: none; 
    font-size: 14px; 
}
nav ul ul a:hover { 
    background-color: #FBE080; 
}
nav { 
    border-radius:4px;
    box-:2px 2px 2px rgba(0,0,0,.75);
    
    background-image:-moz-linear-gradient(0% 22px 90deg, #FBE080, #999); 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#FBE080));  
}
nav li:hover { 
    background-image:-moz-linear-gradient(0% 100px 90deg, #999, #FBE080); 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#FBE080), to(#999)); 
}
nav ul ul { 
    border-bottom-left-radius:4px; 
    border-bottom-right-radius:4px;
    box-:2px 2px 2px rgba(0,0,0,.8); 
    background-color:rgba(253,237,178,0.8); 
}
nav ul ul li { 
    border-left:1px solid rgba(0,0,0,0.1); 
    border-right:1px solid rgba(0,0,0,0.1); 
}
nav ul ul li.ultimo { 
    border-left:1px solid rgba(0,0,0,0.1); 
    border-bottom:1px solid rgba(0,0,0,0.1);
    border-bottom-left-radius:4px; 
    border-bottom-right-radius:4px;  
}
nav ul ul a:hover { 
    background-color:rgba(251,224,128,.9); 
}
<!DOCTYPE html>
<html>
<head>
<title>Men&uacute; de Navegaci&oacute;n</title>
<link rel="stylesheet" xxx="estilo2.css">
</head>
<body>
<nav id="MenuNav">
<ul>
<li> <a xxx="#" title="Menu 1">Men&uacute; 1</a> </li>
<li> <a xxx="#" title="Menu 2">Men&uacute; 2<span>^</span></a>
<ul>
<li> <a xxx="#" title="SubMenu 1">Submen&uacute; 1</a> </li>
<li> <a xxx="#" title="SubMenu 2">Submen&uacute; 2</a> </li>
<li class="ultimo"> <a xxx="#" title="SubMenu 3">Submen&uacute; 3</a> </li>
</ul>
</li>
<li> <a xxx="#" title="Menu 3">Men&uacute; 3</a> </li>
<li> <a xxx="#" title="Menu 4">Men&uacute; 4<span>^</span></a>
<ul>
<li> <a xxx="#" title="SubMenu 4">Submen&uacute; 4</a> </li>
<li class="ultimo"> <a xxx="#" title="SubMenu 5">Submen&uacute; 5</a> </li>
</ul>
</li>
<li> <a xxx="#" title="Menu 5">Men&uacute; 5</a> </li>
</ul>
</nav>
</body>
</html>
2

Puedes centrar el men ú aplicando los siguientes pasos:

Haz que elnav中心 su contenidoa ñ adiendotext-align:center。

Haz que la lista tengadisplay:inline-block，de este modo no ocupar á todo el ancho del padre y se centrar á dentro delnav。

Ahora el problema es que queda un espacio "en blanco" bajo la lista,para soluionarlo puedes especificar un alto para elnav(p.e.:la lista tiene un alto de 39px).

您可以在这里找到最简单的方法。De este modo elnavseguir á ocupando el 100% de la pantalla y s ó lo la lista se centrar á dentro.Aqui í puedes ver los cambios funcionando:

nav {
display:block;
margin: 0 auto 20px;
border: 1px solid #222;
position: relative;
background-color: #FBE080;
font: 16px Tahoma, sans-serif;
    text-align:center;
    height:39px;
}
nav ul {
padding:0;
margin: 0;
    display:inline-block;
    text-align: center;
}
nav ul:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
nav li {
position: relative;
float: left;
list-style-type: none;
}
nav li a{
display:block;
padding: 10px 20px;
border-left: 1px solid #999;
border-right: 1px solid #222;
color: #000;
text-decoration: none;
}
nav li a:focus{
outline: none;
text-decoration: underline;
}
nav li:firt-child a{
border-left: none;
}
nav li.ultimo a {
border-right: none;
}
nav li:hover ul {
display: block;
}
nav a span { 
    display: block; 
    float: right; 
    margin-left: 5px; 
}
nav ul a span { 
    -moz-transform:rotate(-180deg);
    -webkit-transform:rotate(-180deg);
    transform: rotate(-180deg);
}
nav ul ul { 
    display: none; 
    width: 100%; 
    position: absolute; 
    left: 0; 
    background: #FDEDB2; 
}
nav ul ul li { 
    float: none; 
}
nav ul ul a { 
    padding: 5px 10px; 
    border-left: none; 
    border-right: none; 
    font-size: 14px; 
}
nav ul ul a:hover { 
    background-color: #FBE080; 
}
nav { 
    border-radius:4px;
    box-:2px 2px 2px rgba(0,0,0,.75);
    
    background-image:-moz-linear-gradient(0% 22px 90deg, #FBE080, #999); 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#FBE080));  
}
nav li:hover { 
    background-image:-moz-linear-gradient(0% 100px 90deg, #999, #FBE080); 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#FBE080), to(#999)); 
}
nav ul ul { 
    border-bottom-left-radius:4px; 
    border-bottom-right-radius:4px;
    box-:2px 2px 2px rgba(0,0,0,.8); 
    background-color:rgba(253,237,178,0.8); 
}
nav ul ul li { 
    border-left:1px solid rgba(0,0,0,0.1); 
    border-right:1px solid rgba(0,0,0,0.1); 
}
nav ul ul li.ultimo { 
    border-left:1px solid rgba(0,0,0,0.1); 
    border-bottom:1px solid rgba(0,0,0,0.1);
    border-bottom-left-radius:4px; 
    border-bottom-right-radius:4px;  
}
nav ul ul a:hover { 
    background-color:rgba(251,224,128,.9); 
}
<!DOCTYPE html>
<html>
<head>
<title>Men&uacute; de Navegaci&oacute;n</title>
<link rel="stylesheet" xxx="estilo2.css">
</head>
<body>
<nav id="MenuNav">
<ul>
<li> <a xxx="#" title="Menu 1">Men&uacute; 1</a> </li>
<li> <a xxx="#" title="Menu 2">Men&uacute; 2<span>^</span></a>
<ul>
<li> <a xxx="#" title="SubMenu 1">Submen&uacute; 1</a> </li>
<li> <a xxx="#" title="SubMenu 2">Submen&uacute; 2</a> </li>
<li class="ultimo"> <a xxx="#" title="SubMenu 3">Submen&uacute; 3</a> </li>
</ul>
</li>
<li> <a xxx="#" title="Menu 3">Men&uacute; 3</a> </li>
<li> <a xxx="#" title="Menu 4">Men&uacute; 4<span>^</span></a>
<ul>
<li> <a xxx="#" title="SubMenu 4">Submen&uacute; 4</a> </li>
<li class="ultimo"> <a xxx="#" title="SubMenu 5">Submen&uacute; 5</a> </li>
</ul>
</li>
<li> <a xxx="#" title="Menu 5">Men&uacute; 5</a> </li>
</ul>
</nav>
</body>
</html>
2 
.Wrapper {
    text-align: center;
}
nav {
display:inline-block;
margin: 0 auto 20px;
border: 1px solid #222;
position: relative;
background-color: #FBE080;
font: 16px Tahoma, sans-serif;
}
nav ul {
padding:0;
margin: 0;
    
    text-align: center;
}
nav ul:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
nav li {
position: relative;
float: left;
list-style-type: none;
}
nav li a{
display:block;
padding: 10px 20px;
border-left: 1px solid #999;
border-right: 1px solid #222;
color: #000;
text-decoration: none;
}
nav li a:focus{
outline: none;
text-decoration: underline;
}
nav li:firt-child a{
border-left: none;
}
nav li.ultimo a {
border-right: none;
}
nav li:hover ul {
display: block;
}
nav a span { 
    display: block; 
    float: right; 
    margin-left: 5px; 
}
nav ul a span { 
    -moz-transform:rotate(-180deg);
    -webkit-transform:rotate(-180deg);
    transform: rotate(-180deg);
}
nav ul ul { 
    display: none; 
    width: 100%; 
    position: absolute; 
    left: 0; 
    background: #FDEDB2; 
}
nav ul ul li { 
    float: none; 
}
nav ul ul a { 
    padding: 5px 10px; 
    border-left: none; 
    border-right: none; 
    font-size: 14px; 
}
nav ul ul a:hover { 
    background-color: #FBE080; 
}
nav { 
    border-radius:4px;
    box-:2px 2px 2px rgba(0,0,0,.75);
    
    background-image:-moz-linear-gradient(0% 22px 90deg, #FBE080, #999); 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#FBE080));  
}
nav li:hover { 
    background-image:-moz-linear-gradient(0% 100px 90deg, #999, #FBE080); 
    background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#FBE080), to(#999)); 
}
nav ul ul { 
    border-bottom-left-radius:4px; 
    border-bottom-right-radius:4px;
    box-:2px 2px 2px rgba(0,0,0,.8); 
    background-color:rgba(253,237,178,0.8); 
}
nav ul ul li { 
    border-left:1px solid rgba(0,0,0,0.1); 
    border-right:1px solid rgba(0,0,0,0.1); 
}
nav ul ul li.ultimo { 
    border-left:1px solid rgba(0,0,0,0.1); 
    border-bottom:1px solid rgba(0,0,0,0.1);
    border-bottom-left-radius:4px; 
    border-bottom-right-radius:4px;  
}
nav ul ul a:hover { 
    background-color:rgba(251,224,128,.9); 
}
<!DOCTYPE html>
<html>
<head>
<title>Men&uacute; de Navegaci&oacute;n</title>
<link rel="stylesheet" xxx="estilo2.css">
</head>
<body>
        <div class="Wrapper">
<nav id="MenuNav">
<ul>
<li> <a xxx="#" title="Menu 1">Men&uacute; 1</a> </li>
<li> <a xxx="#" title="Menu 2">Men&uacute; 2<span>^</span></a>
<ul>
<li> <a xxx="#" title="SubMenu 1">Submen&uacute; 1</a> </li>
<li> <a xxx="#" title="SubMenu 2">Submen&uacute; 2</a> </li>
<li class="ultimo"> <a xxx="#" title="SubMenu 3">Submen&uacute; 3</a> </li>
</ul>
</li>
<li> <a xxx="#" title="Menu 3">Men&uacute; 3</a> </li>
<li> <a xxx="#" title="Menu 4">Men&uacute; 4<span>^</span></a>
<ul>
<li> <a xxx="#" title="SubMenu 4">Submen&uacute; 4</a> </li>
<li class="ultimo"> <a xxx="#" title="SubMenu 5">Submen&uacute; 5</a> </li>
</ul>
</li>
<li> <a xxx="#" title="Menu 5">Men&uacute; 5</a> </li>
</ul>
</nav>
        </div>
</body>
</html>

本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处

赞 (57)
Linux查看cpu实时频率的命令:linux:不能用cpupower设置cpu频率调节器 (ACPI故障)
上一篇
Op polo go:allocs/op和B/op在go基准测试中是什么意思
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表（13条）