我想让状态栏的高度为容器的100％。我尝试给它固定的高度，但即使高度增加时......新行上的文本显示在状态栏下方而不是旁边。有状态栏的高度是100％
代码：
.list {
padding: 0;
border: 1px #666666 solid;
width: 250px;
}
.list > .status-bar {
background-color: red;
width: 20px;
padding: 20px;
display: inline-block;
height: 100%;
}<div class="list">
<span class="status-bar"> </span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
</div>我建议去与flexbox，它会给你更多的灵活性和控制布局。
.list {
padding: 0;
border: 1px #666666 solid;
width: 250px;
display: flex;
}
.list .status-bar {
background-color: red;
width: 20px;
padding: 20px;
}
.list .status-text {
flex: 1;
}<div class="list">
<div class="status-bar"></div>
<div class="status-text">Test 1 Test 1Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1 Test 1</div>
</div>
随着垂直居中文本
.list {
padding: 0;
border: 1px #666666 solid;
width: 250px;
display: flex;
}
.list .status-bar {
background-color: red;
width: 20px;
padding: 40px 20px;
}
.list .status-text {
flex: 1;
display: flex;
align-items: center;
}<div class="list">
<div class="status-bar"></div>
<div class="status-text">Test 1 Test 1</div>
</div>你可以试试这个：
浮法status-bar到左边允许文字环绕它。
然后通过清除使用本浮动申请clearfix浮法：
.list:after{
clear: both;
content: '';
display: block;
}
让我知道你对这个意见。谢谢！
.list {
padding:0;
border: 1px #666666 solid;
width: 250px;
}
.list > .status-bar {
background-color: red;
width: 20px;
padding:20px;
display: inline-block;
height:100%;
float: left;
}
.list:after{
clear: both;
content: '';
display: block;
}<div class="list">
<span class="status-bar"> </span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
</div>有一个问题......我怎样才能使文本与您的更改垂直对齐？ – user4756836
@ user4756836刚刚在这里看到你的评论...似乎你已经在LGSon的答案中得到了解决方案:)在这个垂直对齐内联元素的答案中，它需要一些“内嵌块”策略并指定宽度...... – kukkuz
发生这种情况，因为文字是比你的容器的宽度更长。它正在打包并进入状态栏下方。您可以通过将CSS white-space: nowrap;添加到您的.list类中来解决此问题。
.list {
padding:0;
border: 1px #666666 solid;
width: 250px;
white-space: nowrap; /* added */
}
.list > .status-bar {
background-color: red;
width: 20px;
padding:20px;
display: inline-block;
height:100%;
}<div class="list">
<span class="status-bar"> </span>Test 1 Test 1Test 1 Test 1 Test 1 Test 1
</div>文本将溢出到（你可能希望以某种方式来处理 - 也许overflow:hidden）的权利，但它确实解决你的问题。
快速决定：
.list {
display: table;
}
.list > .status-bar {
display: table-cell;
}
最终结果是状态栏始终占据左侧并且文本向右？ – LGSon
是的正确@LGSon – user4756836