Как изменить размер label css - Исправление ошибок и поиск оптимальных решений проблем

The label tag doesn’t have the property ‘width’, so how should I control the width of a label tag?

asked May 12, 2010 at 16:04

Using CSS, of course…

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

The width attribute is deprecated, and CSS should always be used to control these kinds of presentational styles.

answered May 12, 2010 at 16:05

Josh StodolaJosh Stodola

80.9k46 gold badges180 silver badges227 bronze badges

Using the inline-block is better because it doesn’t force the remaining elements and/or controls to be drawn in a new line.

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

tronman

9,69110 gold badges46 silver badges57 bronze badges

answered May 15, 2012 at 12:22

MA9HMA9H

1,8192 gold badges16 silver badges19 bronze badges

Inline elements (like SPAN, LABEL, etc.) are displayed so that their height and width are calculated by the browser based on their content. If you want to control height and width you have to change those elements’ blocks.

display: block; makes the element displayed as a solid block (like DIV tags) which means that there is a line break after the element (it’s not inline). Although you can use display: inline-block to fix the issue of line break, this solution does not work in IE6 because IE6 doesn’t recognize inline-block. If you want it to be cross-browser compatible then look at this article: http://webjazz.blogspot.com/2008/01/getting-inline-block-working-across.html

True Soft

8,6266 gold badges52 silver badges81 bronze badges

answered May 12, 2010 at 16:28

SrkaSrka

3633 silver badges7 bronze badges

You can definitely try this way

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

answered Aug 20, 2019 at 10:32

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

OR 

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

OR 

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

answered Jan 9, 2014 at 5:48

shinyshiny

1246 bronze badges

Giving width to Label is not a proper way. you should take one div or table structure to manage this. but still if you don’t want to change your whole code then you can use following code.

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

answered Aug 10, 2015 at 14:03

Yaxita ShahYaxita Shah

1,1981 gold badge11 silver badges17 bronze badges

You can either give class name to all label so that all can have same width :

 .class-name {  width:200px;}

Example

.labelname{  width:200px;}

or you can simple give rest of label

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

answered Jan 21, 2016 at 7:36

3338_SON3338_SON

351 silver badge11 bronze badges

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

answered Sep 30, 2021 at 10:34

Источник

The <label> element specifies a text label for the <input> tag. Since it is an inline element, using the width property alone won’t have any effect. But there are some methods to add width to the <label> tag.

In this tutorial, we’ll demonstrate some examples of controlling the width of the <label> tag by using the display property set to “block” in combination with the width property.

Usa a <form> element.
Place the <label> tag with the for attribute and the <input> tag with the id, name, and type attributes inside the <form> element.

<form>
  <label for="name">Enter your  name:</label>
  <input id="name" name="name" type="text" />
</form>

Set the display to “block”.
Specify the width.

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

Example of adding width to the <label> tag using the «block» value of the display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        display: block;
        width: 130px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="name">Enter your name:</label>
      <input id="name" name="name" type="text" />
    </form>
  </body>
</html>

Result

Let’s see another example where we use the display property set to “inline-block”.

Example of adding width to the <label> tag using the «inline-block» value of the display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        display: inline-block;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="name">Enter your name:</label>
      <input id="name" name="name" type="text" />
    </form>
  </body>
</html>

Источник

This article will tell you how to change the width of the Html <label> tag, the methods can also be used to change other Html tag’s styles.

1. How To Change The Html Label Tag Width Using CSS & JavaScript.

1.1 Question.

My web page has a login form that contains a user name and password input text box.
But I find the label text User Name: and Password: do not align to the right side beautifully as I want.
How can I change the label width to make the User Name: and Password: label the same width?

Below is my web page Html source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Change Label Width In Html Example</title>
</head>
<body>
<h3>How To Change Label Width In Html Example.</h3>

<div style="display:block; margin-top: 10px;">
    <label>
        User Name:
    </label>
    <input type="text" id="userName" value="Input user name." />
</div>

<div style="display:block; margin-top: 10px;">
    <label>
        Password:
    </label>
    <input type="password" id="password" value="Input password." />
</div>

</body>
</html>

1.2 Change The label Tag Width Using CSS.

You can use CSS to change the Html label‘s tag.

You can add the below CSS string to the label tag’s style attribute value, below is the full source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Change Label Width In Html Example</title>
</head>
<body>
<h3>How To Change Label Width In Html Example.</h3>

<div style="display:block; margin-top: 10px;">
    <label style="display:inline-block;width:90px;text-align:right;">
        User Name:
    </label>
    <input type="text" id="userName" value="Input user name." />
</div>

<div style="display:block; margin-top: 10px;">
    <label style="display:inline-block;width:90px;text-align:right;">
        Password:
    </label>
    <input type="password" id="password" value="Input password." />
</div>

</body>
</html>

For simplicity, you can define the label tag CSS code in the Html source code <style></style> section, then the CSS style will be applied to all the Html label tags in the web page, below is the full source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Change Label Width In Html Example</title>
<style>
    label{
        display:inline-block;
        width:90px;
        text-align:right; 
    }
</style>
</head>
<body>
<h3>How To Change Label Width In Html Example.</h3>

<div style="display:block; margin-top: 10px;">
    <label>
        User Name:
    </label>
    <input type="text" id="userName" value="Input user name." />
</div>

<div style="display:block; margin-top: 10px;">
    <label>
        Password:
    </label>
    <input type="password" id="password" value="Input password." />
</div>

</body>
</html>

1.3 Change The Label Tag Width Using JavaScript.

You can also use javascript to change the Html label tag’s width.
First, get all the label tag node lists on the web page.

Loop in the above label tag node list, for each label tag node, set its CSS property value like below.

labelNode.style.display = 'inline-block';

labelNode.style.width = '90px';

labelNode.style.textAlign = 'right';

Set the above javascript function to the web page body tag’s onload event.
```
<body onload="changeLabelTagWidth()">
```
If you find the above code does not take effect, you should check the source code carefully. For example, I make a mistake with the incorrect spell the style.display to style.diplay.
Below is the source code of the example files how-to-change-label-size-in-html.html, how-to-change-label-size-in-html.js.

how-to-change-label-size-in-html.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Change Label Width In Html Example</title>
<script language="javascript" src="how-to-change-label-size-in-html.js"></script>
</head>
<body onload="changeLabelTagWidth()">
<h3>How To Change Label Width In Html Example.</h3>

<div style="display:block; margin-top: 10px;">
    <label>
        User Name:
    </label>
    <input type="text" id="userName" value="Input user name." />
</div>

<div style="display:block; margin-top: 10px;">
    <label>
        Password:
    </label>
    <input type="password" id="password" value="Input password." />
</div>

</body>
</html>

how-to-change-label-size-in-html.js.

function changeLabelTagWidth(){

    var labelNodeList = document.getElementsByTagName('label');

    var len = labelNodeList.length;

    for(var i=0;i<len;i++){

        labelNode = labelNodeList[i];

        labelNode.style.display = 'inline-block';

        labelNode.style.width = '90px';

        labelNode.style.textAlign = 'right';

        console.log('labelNode.innerHTML = ' + labelNode.innerHTML);
        console.log('labelNode.style.diplay = ' + labelNode.style.diplay);
        console.log('labelNode.style.width = ' + labelNode.style.width);
        console.log('labelNode.style.textAlign = ' + labelNode.style.textAlign);
    }

}

Источник

The <label> HTML element represents a caption for an item in a user interface.

Try it

Associating a <label> with a form control, such as <input> or <textarea> offers some major advantages:

The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.

To explicitly associate a <label> element with an <input> element, you first need to add the id attribute to the <input> element. Next, you add the for attribute to the <label> element, where the value of for is the same as the id in the <input> element.

Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:

<label>
  Do you like peas?
  <input type="checkbox" name="peas" />
</label>

The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:

<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>

Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.

Attributes

This element includes the global attributes.

for

The value of the for attribute must be a single id for a labelable form-related element in the same document as the <label> element. So, any given label element can be associated with only one form control.

Note: To programmatically set the for attribute, use htmlFor.

The first element in the document with an id attribute matching the value of the for attribute is the labeled control for this label element — if the element with that id is actually a labelable element. If it is not a labelable element, then the for attribute has no effect. If there are other elements that also match the id value, later in the document, they are not considered.

Multiple label elements can be given the same value for their for attribute; doing so causes the associated form control (the form control that for value references) to have multiple labels.

Note: A <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.

Styling with CSS

There are no special styling considerations for <label> elements — structurally they are simple inline elements, and so can be styled in much the same way as a <span> or <a> element. You can apply styling to them in any way you want, as long as you don’t cause the text to become difficult to read.

Examples

Defining an implicit label

<label>Click me <input type="text" /></label>

Defining an explicit label with the «for» attribute

<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />

Accessibility concerns

Interactive content

Don’t place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.

Don’t

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Do

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>

Headings

Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label’s text needs to be adjusted visually, use CSS classes applied to the <label> element instead.

If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.

Don’t

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>

Do

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>

Buttons

An <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.

Technical summary

Content categories	Flow content, phrasing content, interactive content, form-associated element, palpable content.
Permitted content	Phrasing content, but no descendant `label` elements. No labelable elements other than the labeled control are allowed.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No `role` permitted
DOM interface	`HTMLLabelElement`

Specifications

Specification
HTML Standard # the-label-element

Browser compatibility

BCD tables only load in the browser

Источник

I have the following code in my html:

<li>
    <p>
        <input type="checkbox" id="is_selected"/>
        <img src="http://site.com/images/user44.png" alt=""/>
        <label for="is_selected">Bob Smith</label>
    </p>
</li>

When I render this, what happens is that there’s a lot of white space to the right side of the label ‘Bob Smith’. The user must click directly on ‘Bob Smith’ to toggle the checkbox, if he clicks to the right at the empty space, nothing happens.

How can I do it so the label ‘Bob Smith’ stretches to fill the entire space to the right?

I’ve tried: width: 100% on the label but it didn’t have any effect.

asked Jul 23, 2011 at 13:33

Use overflow: hidden, along with floating controls.

http://jsfiddle.net/Eric/br84k/

label {
    display: block;
    overflow: hidden;
    line-height: 20px;
}

input, img {
    float: left;
    display: block;
    height: 20px;
}

answered Jul 23, 2011 at 14:31

EricEric

93.9k52 gold badges236 silver badges365 bronze badges

label {
    display: block;
}

Will give it a width of 100% unless otherwise specified.

EDIT:

Making the label a block level element with css does cause some validation errors I do think, as block level elements should not be placed in <p /> tags. Consider an alternative for the <p /> tag if you implement this, a <div /> will do just fine here.

answered Jul 23, 2011 at 13:35

WillemWillem

7232 gold badges9 silver badges27 bronze badges

Источник

I have the following code in my html:

<li>
    <p>
        <input type="checkbox" id="is_selected"/>
        <img src="http://site.com/images/user44.png" alt=""/>
        <label for="is_selected">Bob Smith</label>
    </p>
</li>

How can I do it so the label ‘Bob Smith’ stretches to fill the entire space to the right?

I’ve tried: width: 100% on the label but it didn’t have any effect.

asked Jul 23, 2011 at 13:33

Use overflow: hidden, along with floating controls.

http://jsfiddle.net/Eric/br84k/

label {
    display: block;
    overflow: hidden;
    line-height: 20px;
}

input, img {
    float: left;
    display: block;
    height: 20px;
}

answered Jul 23, 2011 at 14:31

EricEric

93.9k52 gold badges236 silver badges365 bronze badges

label {
    display: block;
}

Will give it a width of 100% unless otherwise specified.

EDIT:

answered Jul 23, 2011 at 13:35

WillemWillem

7232 gold badges9 silver badges27 bronze badges

Источник

Example of adding width to the <label> tag using the «block» value of the display property:

Result

Example of adding width to the <label> tag using the «inline-block» value of the display property:

1. How To Change The Html Label Tag Width Using CSS & JavaScript.

1.1 Question.

1.2 Change The label Tag Width Using CSS.

1.3 Change The Label Tag Width Using JavaScript.

Try it

Attributes

Styling with CSS

Examples

Defining an implicit label

Defining an explicit label with the «for» attribute

Accessibility concerns

Interactive content

Don’t

Do

Headings

Don’t

Do

Buttons

Technical summary

Specifications

Browser compatibility

Читайте также: