Menu
Hi
I have 3 SPAN that must be inline and have and a min-width.
Apparently on IE, the SPAN can't have an min-width. I try to use DIV but when I put it inline, the min-width is ignore.
CSS
span {
display: inline;
min-width: 150px;
}
HTML
<span>1</span>
<span>2</span>
<span>3</span>
532
The height and width of an inline element cannot be set in CSS. You cannot set the height and width of block-level elements in CSS. Inline elements flow left to right, meaning inline elements appear on the same line unless the line wraps or there's an explicit line break ( <br/> )
The min-inline-size CSS property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode .
Assigning the Width of the Span Element You can assign a width to the span after setting its “display” property to either “block” or “inline-block.” Moreover, you can use the float and width properties to assign a width to the same element. The width of span is affected by the default display property of the same.
When it comes to margins and padding, browsers treat inline elements differently. You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element. Inline elements can actually appear within block elements, as shown below.
inline element can't take width, height, vertical margin & padding. So you have to define display:inline-block; write like this:
span {
display: inline-block;
*display: inline;/* for IE7*/
*zoom:1;/* for IE7*/
min-width: 150px;
}
Source: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 10.3 Calculating widths and margins: 10.3.1 Inline, non-replaced elements:
The 'width' property does not apply. A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
check this http://jsfiddle.net/yCvhB/5/
156
you could use padding.
since you made the element inline there is no point of specifying min-width.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
