Question

这是我的HTML代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Avrupa Networking</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/fonts.css" rel="stylesheet" type="text/css">
</head>

<body>
<header id="container"></header>

<div id="main">

<header id="header">
                <section id="logo"><img src="images/logo.png" /></section>
                <section id="search">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <select class="s1"> <option>Tüm Kategoriler</option>
                                    <option>BAYAN ATLET/BODY/BÜSTİYER</option>
                                    <option>BAYAN ÇORAP</option>
                                    <option>BAYAN KÜLOT/BOXER</option>
                                    <option>BAYAN PİJAMA/EV GİYİM</option>
                                    <option>BAYAN TAYT</option>
                                </select>
                            </td>
                            <td>
                                <input type="text" class="t1" />
                            </td>
                            <td>
                                <input type="button" class="b1" />
                            </td>
                        </tr>
                    </table>
                </section>
</header>

<nav id="lnav"></nav>

<nav id="mnav"> </nav>

</div>
<footer id="foot">

</footer>

</body>
</html>

这是CSS

body{
    margin: 0px; padding: 0px;  
    background-color: #eceeed;  
    font-family: Segoe UI, Arial, Helvetica, sans-serif;
    color: #4e5452;
}

.t1 {
    font-family:inherit;
    margin-left:3px;
    padding-left:5px;
    height: 30px; 
    width: 260px;   
    border: 0px;
    border-left: 1px solid rgba(255, 0, 0, .1);
    outline:0px;
}
.s1 {
    font-family:inherit;
    margin-left: 2px;
    height: 40px; 
    width: 190px;     
    border: 0 !important;  
    -webkit-appearance: none;  
    -moz-appearance: none;  
    background: url('../images/select.png') no-repeat; 
    background-position: 170px 12px;  
    width: 190px; 
    text-indent: 0.01px; 
    text-overflow: "";  
}

.b1{
border:0px;
width:40px;
height:40px;
background-image: url(../images/search-button.jpg);
}
#container {
    background-image: url(../images/bg-horizonal-bar.jpg);
    background-repeat: repeat-x;
    height: 60px;
    width: auto;
}

#header {
    height:140px;
    width: 1000px auto;
    clear:both;
    }

#logo{
    float:left;
}

#search{
    width:500px;
    height:40px;
    margin-top:50px;
    float:right;
    background-color:#fff;
    overflow:hidden;    
    border: solid 1px #E5E5E5;
    outline: 0;
    background: -webkit-gradient(linear, left top, left 2, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 2px);
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
}

#main{
    width:1000px;
    margin: 0px auto 0px auto;
}

#lnav{
    width:200px;
    height:45px;
    background-color:#000;
    border-bottom: 5px solid #c40100;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
}

#mnav{
    margin-left:10px;
    height:45px;
    width: 790px;
    background-color:#000;
    border-bottom: 5px solid #c40100;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;


}

Problem is 导航项目没有水平对齐，我试过从左到左浮动，没有任何东西我尝试了一些明确的代码并将导航更改为div 我使用了错误的html5 或者只是CSS 什么CSS编码lnav和mnav？

任何帮助表示赞赏。谢谢。

Answer 1

JSFiddle - DEMO或Fiddle SHOW

解决方案2：使用float: right;至#mnav和float: left;至#lnav - DEMO 或 SHOW

您可以float: left;使用#mnav和#lnav并将width: 1000px;修复为#main容器，然后使用float即可很好的选择。

<强> CSS：

body {
    margin: 0px; padding: 0px;  
    background-color: #eceeed;  
    font-family: Segoe UI, Arial, Helvetica, sans-serif;
    color: #4e5452;
}
.t1 {
    font-family:inherit;
    margin-left:3px;
    padding-left:5px;
    height: 30px; 
    width: 260px;   
    border: 0px;
    border-left: 1px solid rgba(255, 0, 0, .1);
    outline:0px;
}
.s1 {
    font-family:inherit;
    margin-left: 2px;
    height: 40px; 
    width: 190px;     
    border: 0 !important;  
    -webkit-appearance: none;  
    -moz-appearance: none;  
    background: url('../images/select.png') no-repeat; 
    background-position: 170px 12px;  
    width: 190px; 
    text-indent: 0.01px; 
    text-overflow: "";  
}
.b1 {
border:0px;
width:40px;
height:40px;
background-image: url(../images/search-button.jpg);
}
#container {
    background-image: url(../images/bg-horizonal-bar.jpg);
    background-repeat: repeat-x;
    height: 60px;
    width: auto;
}
#header {
    height:140px;
    width: 1000px auto;
    clear:both;
    }
#logo {
    float:left;
}
#search {
    width:500px;
    height:40px;
    margin-top:50px;
    float:right;
    background-color:#fff;
    overflow:hidden;    
    border: solid 1px #E5E5E5;
    outline: 0;
    background: -webkit-gradient(linear, left top, left 2, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 2px);
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
}
#main {
    width:1000px;
    margin: 0px auto 0px auto;
}
#lnav {
    width:200px;
    height:45px;
    float: left;
    background-color:#000;
    border-bottom: 5px solid #c40100;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
}
#mnav {
    float: left;
    margin-left:10px;
    height:45px;
    width: 790px;
    background-color:#000;
    border-bottom: 5px solid #c40100;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
}

<强> HTML：

<header id="container"></header>
<div id="main">
    <header id="header">
        <section id="logo">
            <img src="images/logo.png" />
        </section>
        <section id="search">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td>
                        <select class="s1">
                            <option>Tüm Kategoriler</option>
                            <option>BAYAN ATLET/BODY/BÜSTİYER</option>
                            <option>BAYAN ÇORAP</option>
                            <option>BAYAN KÜLOT/BOXER</option>
                            <option>BAYAN PİJAMA/EV GİYİM</option>
                            <option>BAYAN TAYT</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" class="t1" />
                    </td>
                    <td>
                        <input type="button" class="b1" />
                    </td>
                </tr>
            </table>
        </section>
    </header>
    <nav id="lnav"></nav>
    <nav id="mnav"></nav>
</div>
<footer id="foot"></footer>

Answer 2

将#lnav，#mnav设为'display:inline-block'，这样右侧导航将获得适合的空间，并缩小右侧导航的宽度。

以下是使用display的演示：inline-block和缩小右侧导航宽度http://jsfiddle.net/adarshkr/kyfztxht/2/

CSS

#lnav{
width: 200px;
height: 45px;
background-color: #000;
border-bottom: 5px solid #c40100;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
display: inline-block;
}

#mnav {
margin-left: 10px;
height: 45px;
width: 770px;
background-color: #000;
border-bottom: 5px solid #c40100;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
display: inline-block;
}

或者float the navigation并将它们包装在这样的div中并使用clearfix

这是使用浮动http://jsfiddle.net/adarshkr/p717orum/

的链接

<div class="navigation cf">
   <nav id="lnav"></nav>

   <nav id="mnav"> </nav>

 </div>

Clearfix代码将其放入css

.cf:after,
.cf:before {
    content: '';
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    zoom: 1;
}
#lnav{
width: 200px;
height: 45px;
background-color: #000;
border-bottom: 5px solid #c40100;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
float:left;
}

#mnav {
margin-left: 10px;
height: 45px;
width: 770px;
background-color: #000;
border-bottom: 5px solid #c40100;
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
float:right
}

当您浮动元素时，请使用clearfix代码以避免冲突并添加＆＃39; cf＆＃39;类到浮动元素父母。就像我添加了＆＃39; cf＆＃39;导航父母的类别，即导航＆＃39;。

我希望将来可以帮助你。

html5 nav除了导航

2 个答案:

JSFiddle - DEMO或Fiddle SHOW