Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Label widths, want fixed but it keeps auto-sizing according to text?

Tags:

html

css

I am creating some tabs using labels, then im going to add some simple hover over javascript. However i want all the labels to be of fixed size with the text in the centre. This is what i have:

<style>
        .button
        {
            border-style:solid;
            border-width:1px;
            background-color:rgb(193,203,225);
            font: normal 14px arial, sans, sans-serif;
            text-align:center;
            color: rgb(54,95,145);
            width:100px;
            margin: 0px; 
            padding: 0px; 
            padding-top: 3px; 
            padding-bottom: 3px; 
            text-align: center; 
        }
    </style>

    <label id='Label5' class='button'>  Personal Details  </label>
    <label id='Label1' class='button'>     Education      </label>
    <label id='Label2' class='button'>    Achievements    </label>
    <label id='Label3' class='button'>   Work Experience  </label>
    <label id='Label6' class='button'>     IT Skills      </label>
    <label id='Label4' class='button'>     Languages      </label>

but its not working? Could someone please help?

like image 676
Tom Avatar asked Jul 23 '10 14:07

Tom


People also ask

How do I fix the size of a label in HTML?

To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.

How do you adjust the width of a label tag?

Label is an inline element, it cannot have width value; in order to do this you need to put display:block or float:left .

How do I fix the container size in CSS?

Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.


1 Answers

a layer is a inline-element, and you can't give a width to inline-elements. try to set display:inline-block for .button (note that this isn't supported by IE6)

like image 187
oezi Avatar answered Sep 30 '22 19:09

oezi