Question

求指教怎么在CSS里让这两个按钮不换行

<style>.download-button {
margin:0px auto;
text-align: center;
text-decoration: none;
padding: .75em 1em;
color:#fff;
display: block;
font-size: 1.2em;
line-height: 1.5em;
background-color: #6ba92b;
background-image: -webkit-linear-gradient(#66a428,#6ba92b,#8dc63e);
background-image: -moz-linear-gradient(#66a428,#6ba92b,#8dc63e);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
box-shadow: 0 2px 4px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4);
border: 1px solid #0086b2;
cursor: pointer;
width:140px;
height:76
}
.download-button:hover {
color: #fff;
background-color: #fff;
background-image: -webkit-linear-gradient(#6ba92b,#8fc83f);
background-image: -moz-linear-gradient(#6ba92b,#8fc83f)
}

.download-button title {
font-size: 1em;
font-weight: bold;
color:#FFF;
display: block
}

.download-button small {
font-size: .8em;
color:#FFF;
opacity: .8;
display: block
}
</style>
上面的是CSS...下面的是代码...

<div class="download-button" ><a href="aaa" rel="nofollow">
<title>123123123123</title>
<small> – 共 1 次下载 – 7MB</small>
</a></div>

<div class="download-button" ><a href="aaa" rel="nofollow">
<title>123123123123</title>
<small> – 共 1 次下载 – 7MB</small>
</a></div>

结果还是会自动换行啊..请问哪里出了错?

Answer 1

应该要用到浮动 float:left 或者绝对定位也可以，这个是CSS盒子模式的知识点，如果没有float,这一个div 就会占一行。通过padding margin等调节内边距外边距，正常来说外面是要用一层打的div包住。

追问

添加float:left后突然连接没法点了...就像背景图一样了..是CSS冲突了吗?www[点]ttdms[点]com/dedecms/
这个页面...

追答

把display: block 去掉，因为float在父的div中就是要取消块状结构，你在 small和title那里又加上了display:block，这可能会出问题，块状的就是占一整行那种

追问

去掉了还是没连接....

Answer 2

把div 加上 float:left

追问

但这样就直接靠左了..我想不换行然后让他们两个居中

Answer 3

哪两个按钮?两个div?

追问

地下那不是代码?那里不是有两行div吗

追答

<style>
    .center{
width:365px;/*这里改成合适的宽度*/
margin:0 auto;
    }
    .download-button{
     float: left;
    }
</style>

<div class="center">
<div class="download-button" ><a href="aaa" rel="nofollow">
<title>123123123123</title>
<small> &ndash; 共 1 次下载 &ndash; 7MB</small>
</a></div>

<div class="download-button" ><a href="aaa" rel="nofollow">
<title>123123123123</title>
<small> &ndash; 共 1 次下载 &ndash; 7MB</small>
</a></div>

<div style='clear:both'></div>
</div>

追问

添加float:left后突然连接没法点了...就像背景图一样了..是CSS冲突了吗?www[点]ttdms[点]com/dedecms/
这个页面...

追答

你那两个div完全被
给遮挡了

追问

那我应该怎么改才行?

追答

你这个页面的话,.entry-footer加上margin-top:92px;