我正在使用 Bootstrap CSS 为网站创建一个简单的横幅,在将横幅中的文本居中后,我想要一个与其内联显示的按钮。但是,在我创建按钮后,它不会与按钮内的居中文本内联显示。
HTML:
<div id="idea_banner">
<div class="container">
<b>Got an idea? Tell us about it!</b>
<a href="#" class="btn btn-success btn-large">Give us an idea</a>
</div>
</div>
CSS:
#idea_banner {
background: #4B91FB;
overflow:hidden;
width:100%;
height:90px;
}
.container {
position:relative;
}
.container b {
display:block;
text-align:center;
margin-right:100px;
margin-top:35px;
color:#FFF;
font-size:22px;
white-space:nowrap;
}
.container a {
display:inline-block;
float:left;
}
我不确定这是否是 Bootstrap 问题。非常感谢任何帮助!
最佳答案
之所以发生,是因为您显示了 b
作为block
在你的 CSS 中。将其更改为 inline
把它放在一行中。
此外,删除 float: left
对于 .container a
并添加 text-align: center
对于 .container
.
顺便说一下,<b>
不推荐使用标签。如果您需要一个元素来包装文本,请使用 <p>
相反。
工作代码片段:
#idea_banner {
background: #4B91FB;
overflow:hidden;
width:100%;
height:90px;
}
.container {
position:relative;
text-align: center;
}
.container b {
display: inline;
text-align:center;
margin-right:10px;
margin-top:35px;
color:#FFF;
font-size:22px;
white-space:nowrap;
}
.container a {
display:inline;
/*float:left;*/
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="idea_banner">
<div class="container">
<b>Got an idea? Tell us about it!</b>
<a href="#" class="btn btn-success btn-large">Give us an idea</a>
</div>
</div>
关于css - Bootstrap 按钮不显示与容器元素内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27436883/