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

如果我理解正确，您的代码是

＆＃13;

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

＆＃13;

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

＆＃13;

有一些问题：

内联元素忽略width属性。同时使用display: inline和width是没用的。
.col-xs-4设置float: left，它会阻止display: block（因此width会受到尊重）。同时使用display: inline和float是没用的。
除了某些特殊布局模式或使用min-width时，width: 0将使元素忽略其内容并为0px宽。通常这是不受欢迎的。

如果你想要的是让它忽略.col-xs-4＆＃39; width: 33.33333333%并让它缩小到适合，你应该设置的是最初的width: auto。

＆＃13;

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

＆＃13;

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

＆＃13;

如何贴合标签＆＃34; css width＆＃34;

1 个答案: