我试图将主要内容放在左边,将导航放到右边。目前导航系统位于底部。有谁告诉我哪里出错了?
代码(http://codepen.io/kiddigit/pen/PNXRVE)
* {
font-family: garamond;
line-height: 1.9em;
color: #212121;
}
.wrapper {
width: 75%;
margin: 0 auto;
border: 1px solid blue;
padding: 10px;
overflow: hidden;
}
.wrapper2{
overflow: scroll;
}
.main_content {
float: left;
}
.main_text {
float: left;
}
.nav {
float: right;
padding-top: 10px;
width: 25%;
}
header {
border-bottom: 5px solid;
margin-bottom: 10px;
overflow: hidden;
}
header ul {
list-style-type: none;
margin-top: 20px;
display: inline;
}
header li {
float: right;
margin-right: 20px;
width: 110px;
}
header li:first-child {
margin-right: 0;
}
header li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
header li a:hover {
background-color: #111;
color: white;
}
header h1 {
float: left;
text-align: left;
margin: 0 170px .5em 0;
line-height: 0;
font-size: 2em;
}
h1 a {
text-decoration: none;
color: black;
}
/*drop-down menu styles begin*/
.dropbtn {
color: black;
padding: 13px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
display: inline-block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
color: white;
padding: 0 27.5px ;
text-decoration: none;
display: block;
background-color: #3f3f3f;
}
.dropdown-content a:hover {
color: #a9a9a9;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: black;
color: white;
}
/*drop-down menu styles end*/
/*Right nav content starts here*/
.nav li {
list-style-type:none;
font-size: 1em;
}
.nav ul {
padding-left: 10%;
font-size: 1em;
}
.nav ul a:link {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:visited {
text-decoration: none;
color: black;
font-size: 1em;
}
.nav ul a:hover {
text-decoration: none;
background-color: black;
color: white;
padding:3px;
font-size: 1em;
}
/*Right nav ends here*/
答案 0 :(得分:1)
将width: 75%;
添加到.main_content
。它是div
所以它默认占用其父容器的100%。
答案 1 :(得分:1)
你有.main-text
,但你的元素没有那个类。它有id
main-text
。此外,它应该有一个宽度,.main_content
不应该浮动:
http://codepen.io/anon/pen/eZbrPd
花车很乱。请考虑改用inline-block
: