左右div css

Question

我试图在一行中制作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/

Answer 1

使用float:left代替float:right;

.wrapper{position:absolute;font-size:16px;height:15%;width:100%;float:left;}
.left{float:left;width:60%;}
.right{float:left;width:30%;}

fiddle

Answer 2

.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;}

Answer 3

您需要span class="right"一个位置值，以便您可以随意移动它。 我为其赋予了属性position: relative;，以便您可以在.wrapper内移动它。

此外，我将列表的margin属性更改为零，以便两个div都是内联的。

这是我改变的：

.right{
    position: relative;
    right:0;
    width:300px;
}

ul {
    margin: 0;
    list-style: none outside none;
}

请参阅小提琴：http://jsfiddle.net/5wquccee/2/