我遇到的问题是,我想在图像旁边的蓝色div中间只显示2个链接按钮。
我想要这样的东西
link1 {space} link2
{space}
link3 {space} link 4
目前就像这样
link1
link2
link3
link4
这是我的代码 HTML
<div class="list-wrapper">
<div class="my-background">
<div class="div1" style="float:left;"> </div>
<span class="buttons">
<a class="buttonStyling" href="test.com"><b>Link 1</b></a>
<a class="buttonStyling" href="test.com"><b>Link 2</b> </a>
<a class="buttonStyling" href="test.com"><b>Link 3</b> </a>
<a class="buttonStyling" href="test.com"><b>Link 4</b> </a>
</span>
</div>
CSS
.my-background{
background-color: #8af0fc;
height: 204px;
}
.div1 {
height: 205px;
background: url(http://www.dynamicdrive.com/dynamicindex4/lightbox2/horses.jpg) no-repeat;
background-size: 435px;
font-weight: normal;
font-family: futura, arial, sans-serif;
text-align: center;
width:256px;
margin-bottom: -20%;
}
.buttons .buttonStyling{
display: block;
height: 40px;
text-align: center;
line-height: 40px;
width: 35%;
float:right;
}
.buttonStyling {
background: rgb(255, 255, 255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(33%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(225, 225, 225, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%);
background: linear-gradient(top, rgba(255, 255, 255, 1) 33%, rgba(225, 225, 225, 1) 100%); color: #333;
}
这里是jsfiddle
答案 0 :(得分:2)
使用此css
.buttons .buttonStyling{
display: inline-block;
height: 40px;
text-align: center;
line-height: 40px;
width: 35%;
margin: 0 50px 50px 0; //or however much space you want
}
以下是具有上述更改的fiddle
答案 1 :(得分:0)
试试这个:http://jsfiddle.net/cUWn8/5/
基本上,不要使用float
对所有内容进行地毯炸弹,而只将其应用于偶数按钮,这将产生您描述的定位。要获得(1和2)和(3和4)之间的垂直空间,请在#2之后的按钮中添加margin-top
。此外,所有按钮都必须为display: inline-block
。
关键的CSS更改是:
.buttons .buttonStyling { display: inline-block; }
.buttonStyling:nth-of-type(even) { float: right; }
.buttonStyling:nth-of-type(2) ~ .buttonStyling{ margin-top: 50px; }
加上删除float
上的现有.buttons .buttonStyling
属性并div1
内联。
答案 2 :(得分:0)
清理它并在.buttons跨度上设置最大宽度,尝试一下:jsFiddle