我试图在一行中制作 2 个 div,但这样做有问题。我真的不知道如何解决这个问题。
<div class="wrapper">
<span class="left">
<ul>
<li><a href="#">ipad</a></li>
<li><a href="#">iphone</a></li>
<li><a href="#">mac</a></li>
<li><a href="#">ipod</a></li>
<li><a href="#">apple tv</a></li>
</ul>
</span>
<span class="right">
right content
</span>
</div>
css 是:
.wrapper{position:absolute;font-size:16px;height:15%;width:100%;}
.left{float:left;left:0;width:60%;}
.right{float:right;right:0;width:300px;}
ul {
list-style: none outside none;
}
li {
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: -1 .4em;
display: inline;
margin: 20px;
}
在这里你可以看到修改版本:http://jsfiddle.net/5wquccee/
最佳答案
.wrapper{position:absolute;font-size:16px;height:15%;width:100%; }
.left{float:left;left:0;width:60%;}
.right{float:right;right:0;width:300px;}
ul {
list-style: none outside none;
margin: 0px auto;
}
li {
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: -1 .4em;
display: inline;
margin: 0px 20px;
}
div{overflow: visible;}
<div class="wrapper">
<span class="left">
<ul>
<li><a href="#">ipad</a></li>
<li><a href="#">iphone</a></li>
<li><a href="#">mac</a></li>
<li><a href="#">ipod</a></li>
<li><a href="#">apple tv</a></li>
</ul>
</span>
<span class="right">
right content
</span>
</div>
尝试使用这个 css
.wrapper{position:absolute;font-size:16px;height:15%;width:100%; }
.left{float:left;left:0;width:60%;}
.right{float:right;right:0;width:300px;}
ul {
list-style: none outside none;
margin: 0px auto;
}
li {
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: -1 .4em;
display: inline;
margin: 0px 20px;
}
div{overflow: visible;}
关于html - 左右 div css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27756838/