显示块无法正常工作

Question

我遇到了一些显示块的问题，我在这里进行了简化。

.parent
{
  width:200px;
  border: 1px solid black;
  background-color: #cccccc;
}
.first
{
  border: 1px solid black;
  float: left;
  width:30px;
}
.second
{
  border: 1px solid black;
  display: inline-block;
  background-color:white;
}

<div class="parent">
<span class="first">first</span>
<span class="second">second</span>
</div>

修改这个问题及其之前很混乱。在上面的代码片段中，.second宽度仅限于其内容。我希望.second扩展到父容器.parent的末尾。我尝试使用display: block而不是inline-block进行.second，但它不起作用。请建议如何做？

Answer 1

如果我明白你的意思，你可以使用overflow:hidden，当你使用<span>时，你需要添加display:block。附加 如果这是一个div，则无需display:block

.second
{
  border: 1px solid black;
  background-color:white;
  overflow:hidden;
  display : block;
}

演示

.parent
{
  width:200px;
  border: 1px solid black;
  background-color: #cccccc;
}
.first
{
  border: 1px solid black;
  float: left;
  width:30px;
}
.second
{
  border: 1px solid black;
  background-color:white;
  overflow:hidden;
  display : block;
}

<div class="parent">
  <span class="first">first</span>
  <span class="second">second</span>
</div>