如何配合标签"css宽度“

Question

我想设置一些标签的宽度完全符合标签词。如果我用这样的东西：

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

这是可行的，但我想使用引导程序使网站响应，所以当我添加：

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

标签的宽度增加了，我需要它只需要它显示的单词，例如，在图片中你可以看到区别，我给标签背景涂上了颜色，以知道哪个是宽度，我很想达到像test label这样的显示，但也使用引导。

​

​

我已经设置了这个代码：

<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，它阻止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>

​