CSS水平导航菜单列表对齐
我正在尝试设计菜单和子菜单，例如this。
我尝试在我已有的菜单中进行增强，但它不是从菜单的开头开始的。我试图编辑CSS，但我无法弄清楚在哪里解决这个问题。
以下是我要修复的菜单的屏幕截图。
菜单的HTML：
<div style="width:100%; border:1px solid black" align="center">
<ul id="nav-one" class="dropmenu" style="width:1024px; border:1px solid black;">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">ABOUT BOST</a>
<ul>
<li><a href="#">Support</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Your work</a></li>
</ul>
</li>
<li>
<a href="#item3">Downloadsfdsfsd</a>
<ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Custom projects</a></li>
</ul>
</li>
<li>
<a href="#">Productsfsdfsdfsd</a>
<div class="products" align="left">
<ul>
<li><img src="images/236872.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="images/242702.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="images/242177.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="images/226138.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="images/216794.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="images/211826.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li>
<li><img src="images/203708.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li>
</ul>
<div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>
<li>
<a href="#">Tutorials</a>
<div class="tutorials">
<ul class="left">
<li><a href="#">Javascript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">PHP</a></li>
</ul>
<ul class="right">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Actionscript</a></li>
</ul>
<div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href="#">Links</a>
<ul>
<li><a href="#">Programming</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">My websites</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Cool stuff</a></li>
<li><a href="#">Sitebase</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li>
<a href="#">Login</a>
<div class="login">
<label for="txtuser">Username: </label>
<input type="text" name="txtuser" id="txtuser" />
<label for="txtuser">Password: </label>
<input type="password" name="txtpass" id="txtpass" />
<button>Login</button>
</div>
</li>
</ul>
</div>
和CSS：
ul, li{
padding: 0px;
margin: 0px;
}
ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(images/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
.dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
.dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
.dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(images/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
.dropmenu li a:hover span{
background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
.dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
border: 0;
float: none;
}
.dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-decoration: underline;
text-transform: none;
}
a.selected, a:hover{
color: #0657AD !important;
background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
background:transparent url(images/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
.dropmenu div ul{
position: relative;
display: block;
}
.dropmenu li div{
background: #FFFFFF url(images/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
.dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
.dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
.dropmenu li div div a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.dropmenu li div div a:hover{
color: #000;
text-decoration: none;
}
ul.left{
float:left;
width: 145px;
}
ul.right{
float:right;
width: 145px;
}
.small{
color: #666;
font-size: 10px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
.products{
width: 1024px;
padding: 0px !important;
}
.products ul{
width: 100%;
}
.products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
.products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
.products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.products img{
float: left;
padding-right: 10px;
}
.products ul li a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
}
.tutorials{
width: 300px;
}
.login{
padding: 15px !important;
width: 180px;
}
input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
label{
padding: 0px 0px 4px 0px;
display:block;
}
button{
background: #4A779D url(images/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}
如何解决此问题？
2 个答案:
答案 0 :(得分：2)
修复你拥有的这两个类：
.dropmenu li{
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
和这个
.products{
left:0;
width: 1024px;
padding: 0px !important;
}
只需替换它
答案 1 :(得分：0)
试试这个
.products{
width: 960px;
margin-left:auto;
margin-right:auto;
float:left;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？