无法将ul定位在div内 [英] Can't center a ul inside a div

问题描述

我试图将我的导航链接放在 div 中，但无论我尝试过它不会工作。我尝试过 margin-left：auto ， margin-right：auto >

这里是CSS代码的一部分：

  #nav {
显示：block; 
 background-color：＃505050; 
 height：17.5px; 
 box-shadow：0px 0px 15px 5px #CCCCCC inset; 
 border：1px solid #EEEEEE; 
 border-radius：20px; 
 padding：1.5％; 
} 
 #nav li {
 padding：0px 20px 0px 20px; 
 display：inline; 
 / * float：left; * / 
 list-style：none; 
 position：relative; 
} 
 #nav li a {
 padding：0px 0px 20px 0px; 
 color：#FFFFFF; 
 text-decoration：none; 
} 
  

这里是我的ul代码：

 < ul id =nav> 
< li>< a href =＃>首页< / a>< / li& 
< li>< a href =＃>关于我们< / a>< / li> 
< li>< a href =＃>当前光度< / a>< / li> 
< li>< a href =＃>图库< / a> 
< ul> 
< li>< a href =./ bandi.html> Bandi< / a>< / li> 
< li>< a href =./ studs.html>螺柱已使用< / a>< / li> 
< li> Test Dog2< / li> 
< li> Test Dog3< / li> 
< / ul> 
< / li> 
< li>< a href =＃form>与我们联系< / a>< / li> 
< / ul> 
 

这是我的代码的其余部分
实际上没有它我注意到我的下拉菜单下面（画廊）不能正确显示，...这里是其余的CSS文件...，显示了下降下面发生了什么 - 也许你可以告诉我为什么浮动螺丝它所有... ...

...和文本对齐很好....但只有在删除浮动...

  #nav li a：hover {
 text-decoration：underline; 
} 
 #nav li ul {
 padding：10px; 
 font-size：medium; 
 display：none; 
 position：absolute; 
 left：0px; 
 top：30px; 
 background-color：rgba（50,50,50,0.8）; 
} 
 #nav li：hover ul {
 display：block; 
 border-radius：20px; 
 border：1px solid; 
 width：150px; 
} 
  

解决方案

添加 text-align：center 到nav无序列表似乎在Chrome中适用于我

  nav {
 text-align：center; 
} 
  

I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...

Here is the section of CSS code:

#nav {
    display:block;
    background-color:#505050;
    height:17.5px;
    box-shadow: 0px 0px 15px 5px #CCCCCC inset;
    border:1px solid #EEEEEE;
    border-radius:20px;
    padding:1.5%;
}
#nav li {
    padding:0px 20px 0px 20px;
    display:inline;
    /*float:left;*/
    list-style:none;
    position:relative;
}
#nav li a {
    padding:0px 0px 20px 0px;
    color:#FFFFFF;
    text-decoration:none;
}

and here is my ul code:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Current Litters</a></li>
    <li><a href="#">Gallery</a>
        <ul>
            <li><a href="./bandi.html">Bandi</a></li>
            <li><a href="./studs.html">Studs Used</a></li>
            <li>Test Dog2</li>
            <li>Test Dog3</li>
        </ul>
    </li>
    <li><a href="#form">Contact Us</a></li>
 </ul>

Here is the rest of my code actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...

...and the text align did great....but only after removing the float...

#nav li a:hover {
    text-decoration:underline;
}
#nav li ul{
    padding:10px;
    font-size:medium;
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
    display:block;
    border-radius:20px;
    border:1px solid;
    width:150px;
}

解决方案

Adding text-align: center to the nav unordered list seems to work for me in chrome

#nav {
  text-align: center;
}

这篇关于无法将ul定位在div内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！