如何在此HTML標記中將導航菜單與中心對齊？
[英]How do I align the navmenu to the center in this HTML markup?
問題描述
我嘗試的所有內容似乎均無效。 我嘗試過處理樣式表，但我知道樣式表太多了，但是在修改之前，我只是在弄亂它。 我只需要幫助就可以在中間找到導航菜單。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
<div id="header">
<a href="google.com">
<h1 align="center"><ul><a href="#" class="navLink">EXAMPLE</a></ul></h1>
<style>h1 {
color: red;
font-size: 5em;
text-decoration: underline;
}</style>
</div>
<style>h1 {
a:hover{color:#ffffff;}
color: black;
font-size: 3em;
text-decoration: none;
}</style>
<style>
<style>
<!-- Use this for future backgrounds (optimum resolution: 1448 - 697) -->
body
{
background:url("");
background-size:0px 0px;
background-repeat:no-repeat;
padding-top:0px;
<!-- Use this for future backgrounds (optimum resolution: 1448 - 697) -->
}
<!--
a:hover{color:none;}
-->
.navLink {
color: #000000;
text-decoration: none !important;}
ul
{
list-style-type:none;
font-size: 85%;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: lighter;
font-style: regular;}
{
display:inline;
}
</style>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>jQuery suckerFish</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<link rel="stylesheet" type="text/css" href="star-light/star-light.css" media="all">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav-one li").hover(
function(){ $("ul", this).fadeIn("fast"); },
function() { }
);
if (document.all) {
$("#nav-one li").hoverClass ("sfHover");
}
});
$.fn.hoverClass = function(c) {
return this.each(function(){
$(this).hover(
function() { $(this).addClass(c); },
function() { $(this).removeClass(c); }
);
});
};
</script>
<style type="text/css">
/* Navigation */
.nav, .nav ul {
list-style: none;
margin: 0 auto;
padding: 0;
width:1000; margin:0 auto;
}
.nav {
font-family: 'Ubuntu Condensed', sans-serif;
z-index: 100;
position: relative;
}
.nav li {
border-left: 0px solid #000;
float: left;
margin: 0;
padding: 0;
position: relative;
}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {
font: 1.22em/25px 'Ubuntu Condensed', sans-serif;
background: #FFFFFF;
color: #000000;
display: block;
padding: 0 20px;
text-transform: Uppercase;
text-decoration: none;
}
.nav li a:hover {
background: #ccc;
color: #000;
}
#nav-one li:hover a,
#nav-one li.sfHover a {
background: #ccc;
color: #000;
}
#nav-one li:hover ul a,
#nav-one li.sfHover ul a {
background: #FFFFFF;
color: #000000;
}
#nav-one li:hover ul a:hover,
#nav-one li.sfHover ul a:hover {
background: #ccc;
color: #000;
}
.nav ul {
background: #FFFFFF;
border-bottom: 0px solid #000;
list-style: none;
margin: 0;
width: 100px;
position: absolute;
top: -999em;
left: -1px;
}
.nav li:hover ul,
.nav li.sfHover ul {
top: 25px;
}
.nav ul li {
border: 0;
float: none;
}
.nav ul a {
border: 0px solid #000;
border-bottom: 0;
padding-right: 20px;
width: 80px;
white-space: nowrap;
}
.nav ul a:hover {
background: #FFFFFF;
color: #000;
}
</style>
</head>
</head>
<body>
<HR COLOR="#C0C0C0" WIDTH="100%" HEIGHT="1%">
<ul id="nav-one" class="nav">
<li>
<a href="#item1">MEN'S</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item1.1">Tees</a></li>
<li><a href="#item1.2">Bottoms</a></li>
<li><a href="#item1.3">Fleece</a></li>
<li><a href="#item1.4">Shoes</a></li>
</ul>
</li>
<li>
<a href="#item2">WOMEN'S</a>
<ul style="opacity: 0.9999; display: none;">
<li><a href="#item1.1">Tops</a></li>
<li><a href="#item1.2">Denim</a></li>
<li><a href="#item1.3">Fleece</a></li>
<li><a href="#item1.4">Accesories</a></li>
</ul>
</li>
<li>
<a href="#item3">NEW ARRIVALS</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item3.1">MEN'S</a></li>
<li><a href="#item3.2">WOMEN'S</a></li>
</ul>
</li>
<li>
<a href="#item4">BLOG</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</ul>
<ul id="nav-two" class="nav">
</li>
<li>
<a href="#item4">SALE</a>
<ul style="color: #FF0000;">
</ul>
</li>
</ul>
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="0" height="0 1">
<HR COLOR="#C0C0C0" WIDTH="100%">
<ul id="nav" >
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="" height="2">
<p><p align="center"><img border="0" src="" alt="" width="800" height="500">
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="0" height="2">
</ul>
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="200"
<ul id="nav-one" class="nav">
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="40" height="0 1">
<li><a href="#item1.1">Terms and Contditions</a></li>
</ul>
</body>
</html>
我的意思是html btw的這一部分。
<li>
<a href="#item1">MEN'S</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item1.1">Tees</a></li>
<li><a href="#item1.2">Bottoms</a></li>
<li><a href="#item1.3">Fleece</a></li>
<li><a href="#item1.4">Shoes</a></li>
</ul>
</li>
<li>
<a href="#item2">WOMEN'S</a>
<ul style="opacity: 0.9999; display: none;">
<li><a href="#item1.1">Tops</a></li>
<li><a href="#item1.2">Denim</a></li>
<li><a href="#item1.3">Fleece</a></li>
<li><a href="#item1.4">Accesories</a></li>
</ul>
</li>
<li>
<a href="#item3">NEW ARRIVALS</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item3.1">MEN'S</a></li>
<li><a href="#item3.2">WOMEN'S</a></li>
</ul>
</li>
<li>
<a href="#item4">BLOG</a>
<ul style="opacity: 0.9999; display: block;">
<li><a href="#item4.1">item 4.1</a></li>
<li><a href="#item4.2">item 4.2</a></li>
<li><a href="#item4.3">item 4.3</a></li>
</ul>
</ul>
<ul id="nav-two" class="nav">
</li>
<li>
<a href="#item4">SALE</a>
<ul style="color: #FF0000;">
</ul>
</li>
</ul>
2 個解決方案
解決方案1
1 2014-01-09 04:59:55
首先，將<ul>設置類設置為'center'。
<ul class='center' style="opacity: 0.9999; display: block;">
同樣，您可以將class="center"為其他菜單項（Women，New Arrivals等）。
然后添加以下CSS：
.center{
text-align: center;
}
解決方案2
0 2014-01-09 05:26:58
我將建議您將ul“ nav-one”和“ nav-two”都放在一個div中，並給該div設置margin : 0 auto （還包括高度，寬度等其他CSS樣式）。
並且不需要單獨的ul來進行“銷售”，您應該將所有菜單都保留在一個ul中。
<div id="top-menu">
<ul class="nav">
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
css：
#top-menu : {margin : 0 auto; height : auto; width : 920px}
希望我能幫助你。
我如何居中水平導航菜單而不拆分每個鏈接
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.