如何控制标签标签的宽度？

标签标签没有“ width”属性，那么我应该如何控制标签标签的宽度呢？

324181 次浏览
小开
最佳答案

当然是用 CSS..。

label { display: block; width: 100px; }

不推荐使用 width属性，应该始终使用 CSS 来控制这些类型的表示样式。

小开

显示内联元素(如 SPAN、 LABEL 等) ，以便浏览器根据它们的内容计算它们的高度和宽度。如果要控制高度和宽度，就必须更改这些元素的块。

display: block;使元素显示为实体块(如 DIV 标记) ，这意味着元素后面有一个换行符(它不是内联的)。虽然您可以使用 display: inline-block来修复换行问题，但是这个解决方案在 IE6中不起作用，因为 IE6不能识别内联块。如果你想让它跨浏览器兼容，那么看看这篇文章: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

小开

使用 inline-block 更好，因为它不会强制其余元素和/或控件在新行中绘制。

label {
width:200px;
display: inline-block;
}
小开 
label {
width:200px;
display: inline-block;
}


OR


label {
width:200px;
display: inline-flex;
}


OR


label {
width:200px;
display: inline-table;
}
小开

给标签宽度不是一个合适的方法。您应该使用一个 div 或者表结构来管理它。但是，如果你不想改变你的整个代码，那么你可以使用下面的代码。

label {
width:200px;
float: left;
}
小开

您可以为所有标签赋予类名，以便所有标签都具有相同的宽度:

 .class-name {  width:200px;}

例子

.labelname{  width:200px;}

或者你可以简单地给其余的标签

label {  width:200px;  display: inline-block;}
小开

你绝对可以试试这条路

.col-form-label{
display: inline-block;
width:200px;}
小开 
<style type="text/css">
.princip{
height: 190px ;
width:190px ;
border:  solid;
}
label{
height: 190px !important;
width:190px  !important;
border:  solid;
display: block;
}
</style>


<div class="princip"  id="princip">
    

    

<input id="rad1" type="radio" name="rad"/>
    

<label class="lbl" id="lbl" for="rad1">
    

<h1>fdgb</h1>
<h2>sdfs</h2>
</label>
    

</div>

提交答案