Css html5导航除了导航之外_Css_Html

Css html5导航除了导航之外

css html

Css html5导航除了导航之外,css,html,Css,Html,这是我的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" typ

这是我的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>

导航项目没有水平对齐，我试过从左到左从左到右浮动，什么都没有我尝试了一些清晰的代码并将nav更改为div 我用错html5了吗还是仅仅是CSS lnav和mnav的CSS代码是什么

谢谢你的帮助。谢谢

JSFIDLE-or 解决方案2:使用

float:right

至

#mnav

和

浮动：左至#lnav
-或
您可以使用float:left
到#mnav
和#lnav
并且您已经固定了宽度：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;
}

<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>

HTML:
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;
}

<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>


Tüm Kategoriler
巴彦地图集/身体/BÜSTİYER
巴彦乔拉普
巴彦·克洛特/拳击手
巴彦·贾马/埃夫·戈伊姆
巴彦塔伊特
将#lnav
，#mnav
设置为'display:inline block'
，这样右导航将获得合适的空间，并减小右导航的宽度
下面是使用display:inline块和减小右导航宽度的演示
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;
}

或者浮动导航
并将它们像这样包装在一个div中，然后使用clearfix

下面是使用浮动的链接
当您浮动元素时，使用clearfix代码来避免冲突，并将“cf”类添加到浮动元素的父级。就像我在导航父级中添加了“cf”类，即“导航”
我希望它将来能对你有所帮助。
jsfiddle-但我的小提琴很好用，对吗？或者你想让你的导航看起来像那样？@ouzzouzz对我来说也很好。。。这个代码没有错。这可能是个问题。所以请清除浏览器中的历史记录并再次检查。@Mary Melody没有任何更改：/@ouzzouzz我注意到您的css代码中有一个错误-#header{width:1000px auto；}
无效，您应该使用#header{width:1000px；}TRY-或者@Mary Melody我完全复制了您提供的代码，我试图清除缓存。还是一样。我应该烧掉我的电脑并买一台新的吗
.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
}