显示块无法正常工作

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>

显示块无法正常工作

display block not working properly

html

css

display