[英]How do I remove this white background from my inline-block element
I have the following html/css code: 我有以下html / css代码:
<div id="statusSteps">
<span class="step complete">step 1</span>
<span class="step complete">step 2</span>
<span class="step complete">step 3</span>
<span class="step">step 4</span>
<span class="step">step 5</span>
</div>
#statusSteps {
display: inline-block;
border: 1px solid black;
padding: 0px;
margin: 0px;
}
.step {
display: inline-block;
text-align: center;
border-right: 1px solid black;
padding: 0px 15px;
font-weight:bold;
}
.step:last-child {
border-right: none;
}
.complete {
background-color: LightGray;
}
I created a JSFiddle to play around with it: http://jsfiddle.net/wMShU/ 我创建了一个JSFiddle来处理它: http : //jsfiddle.net/wMShU/
In the browsers I tried (Firefox, IE9, and Chrome) there is a white area on the left side of step 1 and step 2. 在我尝试过的浏览器(Firefox,IE9和Chrome)中,步骤1和步骤2的左侧有一个白色区域。
Does anyone know a nice clean way to have those steps with the gray background fill the whole area? 有谁知道一种干净的方法可以使带有灰色背景的步骤覆盖整个区域?
Add float: left;
添加float: left;
to .step
class. 到.step
类。 I've added float: left
and edited your jsfiddle: http://jsfiddle.net/wMShU/1/ 我添加了float: left
并编辑了jsfiddle: http : //jsfiddle.net/wMShU/1/
The solution by Miljan Puzović works, but then you may remove display: inline-block
entirely (floated elements are all implicitly display: block
). MiljanPuzović的解决方案有效,但是您可以完全删除display: inline-block
(所有浮动元素都隐式display: block
)。
The cause of your issue is that inline-block
elements are influenced by whitespace on the markup. 问题的原因是inline-block
元素受标记上的空白影响。 If you remove the whitespace between the <span>
tags (which will make your code look ugly), the white margin will go away. 如果删除之间的空格<span>
标记(这将使你的代码看起来丑陋的),白色的保证金会自动消失。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.