css 如何控制标签标记的宽度?

fjaof16o  于 2023-03-20  发布在  其他
关注(0)|答案(9)|浏览(186)

label标记没有属性“width”,那么我应该如何控制label标记的宽度?

zpjtge22

zpjtge221#

当然,使用CSS ...

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

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

iswrvxsc

iswrvxsc2#

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

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

vsnjm48y3#

内联元素(如SPAN、LABEL等)的显示方式是浏览器根据它们的内容计算它们的高度和宽度。如果你想控制高度和宽度,你必须改变这些元素的块。
display: block;使元素显示为实心块(类似于DIV标签),这意味着元素后面有一个换行符(它不是内联的)。虽然您可以使用display: inline-block来解决换行符的问题,但此解决方案在IE6中不起作用,因为IE6不识别内联块。如果您希望它跨浏览器兼容,请查看这篇文章:http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

bjg7j2ky

bjg7j2ky4#

你一定可以试试这个办法

.col-form-label{
  display: inline-block;
  width:200px;}
3wabscal

3wabscal5#

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

OR 

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

OR 

label {
  width:200px;
  display: inline-table;
}
5cnsuln7

5cnsuln76#

给标签宽度不是一个正确的方法。你应该用一个div或表格结构来管理它。但是如果你不想改变你的整个代码,你可以使用下面的代码。

label {
  width:200px;
  float: left;
}
6kkfgxo0

6kkfgxo07#

您可以为所有标签给予类名称,以便所有标签都具有相同宽度:

.class-name {  width:200px;}

示例

.labelname{  width:200px;}

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

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

rkkpypqq8#

<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>
iyfamqjs

iyfamqjs9#

使用CSS
标签{显示:块;宽度:100 px; }不推荐使用width属性,应该始终使用CSS来控制这些类型的表示样式。

相关问题