[英]right and left div css
我正在嘗試在一行中制作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/
使用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%;}
.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;}
您需要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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.