html - 如何适应标签 "css width"

Question

我想设置一些标签的宽度正好适合标签字。如果我只是使用这样的东西:

<label style="background-color:red;">test label</label>

这行得通，但我想使用 bootstrap 使网站响应，所以当我添加:

<label style="background-color:red;" class="col-xs-4">test span</label>

标签宽度增加，我需要它和它显示的字一样长，例如在图片中你可以看到差异，我将标签背景涂成红色以了解宽度，我我想达到类似显示 test label 的效果，但也使用 bootstrap。

我已经设置了这个代码:

<label class="col-xs-4 col-xs-offset-2" style="margin-bottom:100px; display:inline; width:0;" id="lblAviation">Aviation</label>

得到这个结果:

但是你看到背景不适合单词的第一个字母，更靠左，我需要改进什么？

更新:这是我所有的代码:

<div style="height:400px; width:600px" class="container">
    <div class="row">
        <div class="col-xs-4 col-xs-offset-2" style="height:100px">

            <img src="~/images/aviation.png" width="80" height="80" id="aviation" />

        </div>
        <div class="col-xs-4 col-xs-offset-2" style="height:100px">
            <img src="~/images/international.png" width="80" height="80" id="imgInternational" class="jumper" />
        </div>
        <div class="row" style="margin-left:1em">
            <label class="col-xs-4 col-xs-offset-2" style="margin-bottom:100px; display:inline-block; width:0;" id="lblAviation">Aviation</label>

            <label class="col-xs-4 col-xs-offset-2" style="margin-bottom:100px; margin-left:250px; display:inline; width:0px;" id="lblInternational">International</label>
        </div>

        <div class="col-xs-4 col-xs-offset-2" style="height:100px">

            <img src="~/images/longshore3.gif" width="80" height="80" id="imgLongshore" class="jumper" />

        </div>
        <div class="col-xs-4 col-xs-offset-2" style="height:100px">
            <img src="~/images/marine.png" width="80" height="80" id="imgMarine" class="jumper" />
        </div>
        <div class="row" style="margin-left:1em">
            <label class="col-xs-4 col-xs-offset-2" style="height:100px; margin-left:80px;" id="lblLongshore">Longshore</label>

            <label class="col-xs-4 col-xs-offset-2" style="height:100px; margin-left:120px" id="lblMarine">Marine</label>
        </div>
    </div>
</div>

Answer 1

如果我没理解错的话，你的代码是

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
#lblAviation {
  display: inline;
  width: 0;
  margin-bottom: 100px;
  background-color: red;
}

<label class="col-xs-4 col-xs-offset-2" id="lblAviation">Aviation</label>

这有一些问题:

• 内联元素忽略 width 属性。一起使用 display: inline 和 width 是没用的。
• .col-xs-4 设置 float: left，它 block 化为 display: block(因此 width毕竟受到尊重)。一起使用 display: inline 和 float 是没用的。
• 除了一些特殊的布局模式或者当你使用min-width时，width: 0会让元素忽略它的内容并且宽度为0px。通常这是不受欢迎的。

如果你想要让它忽略 .col-xs-4 的 width: 33.33333333% 并让它收缩以适合，你应该设置什么是初始的 width: auto。

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
#lblAviation {
  width: auto;
  margin-bottom: 100px;
  background-color: red;
}

<label class="col-xs-4 col-xs-offset-2" id="lblAviation">Aviation</label>