CSS fixed width in a span

Question

Within an unordered list    lt li gt  lt span gt  lt  span gt  The lazy dog  lt  li gt   lt li gt  lt span gt AND lt  span gt  The lazy cat  lt  li gt   lt li gt  lt span gt OR lt  span gt  The active goldfish  lt  li gt    Adding a class or style attribute is permitted but padding the text and adding or changing tags is not allowed   The page is rendering with Courier New   Goal is to have text after span lined up       The lazy dog  AND The lazy cat  OR  The active goldfish    Justification of the  OR  is unimportant   The lazy animal text may be wrapped in an additional element but I ll have to double check

User · Answer

Using HTML 5 0  it is possible to fix width of text block using  lt span gt  or  lt div gt       For  lt span gt   what is important is to add following CCS line  display  inline-block    For your empty  lt span gt  what is important is to add  amp nbsp  space   My code is following   x000D   x000D  body x000D     x000D   font-family  Arial  x000D   font-size 20px  x000D     x000D   x000D  div x000D     x000D   width 200px  x000D   font-size 80px  x000D   background-color  lime  x000D     x000D  div span x000D     x000D   display block  x000D   width 200px  x000D   background-color  lime  x000D     x000D   x000D  ul li span x000D     x000D   display  inline-block  x000D   width  80px  x000D   background-color  yellow  x000D     x000D  span tab x000D     x000D   display  inline-block  x000D   width  80px  x000D   background-color  yellow  x000D     x000D   amp lt DIV amp gt  x000D   x000D   lt div class  test  gt ABCDEF lt  div gt  x000D   x000D   amp lt SPAN amp gt  x000D   x000D   lt div gt  x000D       lt span class  test  gt ABCDEF lt  span gt  x000D   lt  div x000D   x000D   lt br gt  x000D   x000D   lt ul gt  x000D     lt li gt  lt span class  tab  gt  amp nbsp  lt  span gt  The lazy dog  lt  li gt  x000D     lt li gt  lt span class  tab  gt AND lt  span gt  The lazy cat  lt  li gt  x000D     lt li gt  lt span class  tab  gt OR lt  span gt  The active goldfish  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    PS  I have defined tab class because ul li span CSS selector is not working on my PC

User · Answer

try this    gt   lt span class  input-group-addon  style  padding-left 6    gt  padding-right 6   width 150px  overflow  auto   gt

User · Answer

Using HTML 5 0  it is possible to fix width of text block using  lt span gt  or  lt div gt       For  lt span gt   what is important is to add following CCS line  display  inline-block    For your empty  lt span gt  what is important is to add  amp nbsp  space   My code is following   x000D   x000D  body x000D     x000D   font-family  Arial  x000D   font-size 20px  x000D     x000D   x000D  div x000D     x000D   width 200px  x000D   font-size 80px  x000D   background-color  lime  x000D     x000D  div span x000D     x000D   display block  x000D   width 200px  x000D   background-color  lime  x000D     x000D   x000D  ul li span x000D     x000D   display  inline-block  x000D   width  80px  x000D   background-color  yellow  x000D     x000D  span tab x000D     x000D   display  inline-block  x000D   width  80px  x000D   background-color  yellow  x000D     x000D   amp lt DIV amp gt  x000D   x000D   lt div class  test  gt ABCDEF lt  div gt  x000D   x000D   amp lt SPAN amp gt  x000D   x000D   lt div gt  x000D       lt span class  test  gt ABCDEF lt  span gt  x000D   lt  div x000D   x000D   lt br gt  x000D   x000D   lt ul gt  x000D     lt li gt  lt span class  tab  gt  amp nbsp  lt  span gt  The lazy dog  lt  li gt  x000D     lt li gt  lt span class  tab  gt AND lt  span gt  The lazy cat  lt  li gt  x000D     lt li gt  lt span class  tab  gt OR lt  span gt  The active goldfish  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    PS  I have defined tab class because ul li span CSS selector is not working on my PC

User · Answer

Well  there s always the brute force method    lt li gt  lt pre gt     The lazy dog  lt  pre gt  lt  li gt   lt li gt  lt pre gt AND The lazy cat  lt  pre gt  lt  li gt   lt li gt  lt pre gt OR  The active goldfish  lt  pre gt  lt  li gt    Or is that what you meant by  padding  the text  That s an ambiguous work in this context   This sounds kind of like a homework question  I hope you re not trying to get us to do your homework for you

User · Answer

Well  there s always the brute force method    lt li gt  lt pre gt     The lazy dog  lt  pre gt  lt  li gt   lt li gt  lt pre gt AND The lazy cat  lt  pre gt  lt  li gt   lt li gt  lt pre gt OR  The active goldfish  lt  pre gt  lt  li gt    Or is that what you meant by  padding  the text  That s an ambiguous work in this context   This sounds kind of like a homework question  I hope you re not trying to get us to do your homework for you

User · Answer

Unfortunately inline elements  or elements having display inline  ignore the width property  You should use floating divs instead    lt style type  text css  gt  div f1   float  left  width  20px    div f2   float  left    div f3   clear  both     lt  style gt    lt div class  f1  gt  lt  div gt  lt div class  f2  gt The Lazy dog lt  div gt  lt div class  f3  gt  lt  div gt   lt div class  f1  gt AND lt  div gt  lt div class  f2  gt The Lazy cat lt  div gt  lt div class  f3  gt  lt  div gt   lt div class  f1  gt OR lt  div gt  lt div class  f2  gt The active goldfish lt  div gt  lt div class  f3  gt  lt  div gt    Now I see you need to use spans and lists  so we need to rewrite this a little bit    lt html gt  lt head gt   lt style type  text css  gt          span f1   display  block  float  left  clear  left  width  60px        li   list-style-type  none         lt  style gt    lt  head gt  lt body gt   lt ul gt   lt li gt  lt span class  f1  gt  amp nbsp  lt  span gt The lazy dog  lt  li gt   lt li gt  lt span class  f1  gt AND lt  span gt  The lazy cat  lt  li gt   lt li gt  lt span class  f1  gt OR lt  span gt  The active goldfish  lt  li gt   lt  ul gt   lt  body gt   lt  html gt

User · Answer

x000D   x000D  ul   x000D   list-style-type  none  x000D   padding-left  0px  x000D    x000D   x000D  ul li span    x000D   float  left  x000D   width  40px  x000D    x000D   lt ul gt  x000D       lt li gt  lt span gt  lt  span gt  The lazy dog  lt  li gt  x000D       lt li gt  lt span gt AND lt  span gt  The lazy cat  lt  li gt  x000D       lt li gt  lt span gt OR lt  span gt  The active goldfish  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

The  lt span gt  tag will need to be set to display block as it is an inline element and will ignore width   so    lt style type  text css  gt  span   width  50px  display  block     lt  style gt    and then    lt li gt  lt span gt  amp nbsp  lt  span gt something lt  li gt   lt li gt  lt span gt AND lt  span gt something else lt  li gt

User · Answer

x000D   x000D  ul   x000D    list-style-type  none  x000D    padding-left  0px  x000D    x000D   x000D  ul li span   x000D    float  left  x000D    width  40px  x000D    x000D   lt ul gt  x000D     lt li gt  lt span gt  lt  span gt  The lazy dog  lt  li gt  x000D     lt li gt  lt span gt AND lt  span gt  The lazy cat  lt  li gt  x000D     lt li gt  lt span gt OR lt  span gt  The active goldfish  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Like Eoin said  you need to put a non-breaking space into your  empty  spans  but you can t assign a width to an inline element  only padding margin so you ll need to make it float so that you can give it a width   For a jsfiddle example  see http   jsfiddle net laurensrietveld JZ2Lg

User · Answer

You can do it using a table  but it is not pure CSS    lt style gt  ul      text-indent  40px     li      list-style-type  none      padding  0     span      color   ff0000      position  relative      left  -40px     lt  style gt     lt ul gt   lt span gt  lt  span gt  lt li gt The lazy dog  lt  li gt   lt span gt AND lt  span gt  lt li gt The lazy cat  lt  li gt   lt span gt OR lt  span gt  lt li gt The active goldfish  lt  li gt   lt  ul gt    Note that it doesn t display exactly like you want  because it switches line on each option  However  I hope that this helps you come closer to the answer

User · Answer

You can do it using a table  but it is not pure CSS    lt style gt  ul      text-indent  40px     li      list-style-type  none      padding  0     span      color   ff0000      position  relative      left  -40px     lt  style gt     lt ul gt   lt span gt  lt  span gt  lt li gt The lazy dog  lt  li gt   lt span gt AND lt  span gt  lt li gt The lazy cat  lt  li gt   lt span gt OR lt  span gt  lt li gt The active goldfish  lt  li gt   lt  ul gt    Note that it doesn t display exactly like you want  because it switches line on each option  However  I hope that this helps you come closer to the answer

User · Answer

x000D   x000D  ul   x000D   list-style-type  none  x000D   padding-left  0px  x000D    x000D   x000D  ul li span    x000D   float  left  x000D   width  40px  x000D    x000D   lt ul gt  x000D       lt li gt  lt span gt  lt  span gt  The lazy dog  lt  li gt  x000D       lt li gt  lt span gt AND lt  span gt  The lazy cat  lt  li gt  x000D       lt li gt  lt span gt OR lt  span gt  The active goldfish  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

lt style type  text css  gt   span     position absolute    width  50px      lt  style gt    You can do this method for assigning width for inline elements

User · Answer

The  lt span gt  tag will need to be set to display block as it is an inline element and will ignore width   so    lt style type  text css  gt  span   width  50px  display  block     lt  style gt    and then    lt li gt  lt span gt  amp nbsp  lt  span gt something lt  li gt   lt li gt  lt span gt AND lt  span gt something else lt  li gt

User · Answer

The  lt span gt  tag will need to be set to display block as it is an inline element and will ignore width   so    lt style type  text css  gt  span   width  50px  display  block     lt  style gt    and then    lt li gt  lt span gt  amp nbsp  lt  span gt something lt  li gt   lt li gt  lt span gt AND lt  span gt something else lt  li gt

User · Answer

x000D   x000D  ul   x000D    list-style-type  none  x000D    padding-left  0px  x000D    x000D   x000D  ul li span   x000D    float  left  x000D    width  40px  x000D    x000D   lt ul gt  x000D     lt li gt  lt span gt  lt  span gt  The lazy dog  lt  li gt  x000D     lt li gt  lt span gt AND lt  span gt  The lazy cat  lt  li gt  x000D     lt li gt  lt span gt OR lt  span gt  The active goldfish  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Like Eoin said  you need to put a non-breaking space into your  empty  spans  but you can t assign a width to an inline element  only padding margin so you ll need to make it float so that you can give it a width   For a jsfiddle example  see http   jsfiddle net laurensrietveld JZ2Lg

User · Answer

In an ideal world you d achieve this simply using the following css   lt style type  text css  gt   span     display  inline-block    width  50px      lt  style gt    This works on all browsers apart from FF2 and below      Firefox 2 and lower don t support this   value  You can use -moz-inline-box    but be aware that it s not the same as   inline-block  and it may not work as   you expect in some situations    Quote taken from quirksmode

User · Answer

x000D   x000D  ul   x000D    list-style-type  none  x000D    padding-left  0px  x000D    x000D   x000D  ul li span   x000D    float  left  x000D    width  40px  x000D    x000D   lt ul gt  x000D     lt li gt  lt span gt  lt  span gt  The lazy dog  lt  li gt  x000D     lt li gt  lt span gt AND lt  span gt  The lazy cat  lt  li gt  x000D     lt li gt  lt span gt OR lt  span gt  The active goldfish  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Like Eoin said  you need to put a non-breaking space into your  empty  spans  but you can t assign a width to an inline element  only padding margin so you ll need to make it float so that you can give it a width   For a jsfiddle example  see http   jsfiddle net laurensrietveld JZ2Lg

User · Answer

In an ideal world you d achieve this simply using the following css   lt style type  text css  gt   span     display  inline-block    width  50px      lt  style gt    This works on all browsers apart from FF2 and below      Firefox 2 and lower don t support this   value  You can use -moz-inline-box    but be aware that it s not the same as   inline-block  and it may not work as   you expect in some situations    Quote taken from quirksmode

User · Answer

You can do it using a table  but it is not pure CSS    lt style gt  ul      text-indent  40px     li      list-style-type  none      padding  0     span      color   ff0000      position  relative      left  -40px     lt  style gt     lt ul gt   lt span gt  lt  span gt  lt li gt The lazy dog  lt  li gt   lt span gt AND lt  span gt  lt li gt The lazy cat  lt  li gt   lt span gt OR lt  span gt  lt li gt The active goldfish  lt  li gt   lt  ul gt    Note that it doesn t display exactly like you want  because it switches line on each option  However  I hope that this helps you come closer to the answer

User · Answer

x000D   x000D  ul   x000D    list-style-type  none  x000D    padding-left  0px  x000D    x000D   x000D  ul li span   x000D    float  left  x000D    width  40px  x000D    x000D   lt ul gt  x000D     lt li gt  lt span gt  lt  span gt  The lazy dog  lt  li gt  x000D     lt li gt  lt span gt AND lt  span gt  The lazy cat  lt  li gt  x000D     lt li gt  lt span gt OR lt  span gt  The active goldfish  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Like Eoin said  you need to put a non-breaking space into your  empty  spans  but you can t assign a width to an inline element  only padding margin so you ll need to make it float so that you can give it a width   For a jsfiddle example  see http   jsfiddle net laurensrietveld JZ2Lg

User · Answer

Unfortunately inline elements  or elements having display inline  ignore the width property  You should use floating divs instead    lt style type  text css  gt  div f1   float  left  width  20px    div f2   float  left    div f3   clear  both     lt  style gt    lt div class  f1  gt  lt  div gt  lt div class  f2  gt The Lazy dog lt  div gt  lt div class  f3  gt  lt  div gt   lt div class  f1  gt AND lt  div gt  lt div class  f2  gt The Lazy cat lt  div gt  lt div class  f3  gt  lt  div gt   lt div class  f1  gt OR lt  div gt  lt div class  f2  gt The active goldfish lt  div gt  lt div class  f3  gt  lt  div gt    Now I see you need to use spans and lists  so we need to rewrite this a little bit    lt html gt  lt head gt   lt style type  text css  gt          span f1   display  block  float  left  clear  left  width  60px        li   list-style-type  none         lt  style gt    lt  head gt  lt body gt   lt ul gt   lt li gt  lt span class  f1  gt  amp nbsp  lt  span gt The lazy dog  lt  li gt   lt li gt  lt span class  f1  gt AND lt  span gt  The lazy cat  lt  li gt   lt li gt  lt span class  f1  gt OR lt  span gt  The active goldfish  lt  li gt   lt  ul gt   lt  body gt   lt  html gt

User · Answer

The  lt span gt  tag will need to be set to display block as it is an inline element and will ignore width   so    lt style type  text css  gt  span   width  50px  display  block     lt  style gt    and then    lt li gt  lt span gt  amp nbsp  lt  span gt something lt  li gt   lt li gt  lt span gt AND lt  span gt something else lt  li gt

User · Answer

In an ideal world you d achieve this simply using the following css   lt style type  text css  gt   span     display  inline-block    width  50px      lt  style gt    This works on all browsers apart from FF2 and below      Firefox 2 and lower don t support this   value  You can use -moz-inline-box    but be aware that it s not the same as   inline-block  and it may not work as   you expect in some situations    Quote taken from quirksmode

User · Answer

Well  there s always the brute force method    lt li gt  lt pre gt     The lazy dog  lt  pre gt  lt  li gt   lt li gt  lt pre gt AND The lazy cat  lt  pre gt  lt  li gt   lt li gt  lt pre gt OR  The active goldfish  lt  pre gt  lt  li gt    Or is that what you meant by  padding  the text  That s an ambiguous work in this context   This sounds kind of like a homework question  I hope you re not trying to get us to do your homework for you

User · Answer

In an ideal world you d achieve this simply using the following css   lt style type  text css  gt   span     display  inline-block    width  50px      lt  style gt    This works on all browsers apart from FF2 and below      Firefox 2 and lower don t support this   value  You can use -moz-inline-box    but be aware that it s not the same as   inline-block  and it may not work as   you expect in some situations    Quote taken from quirksmode

User · Answer

People span in this case cant be a block element because rest of the text in between li elements will go down  Also using float is very bad idea because you will need to set width for whole li element and this width will need to be the same as width of whole ul element or other container   Try something like this in html    lt li gt  lt span gt  lt  span gt  lt strong gt The lt  strong gt  lazy dog  lt  li gt   lt li gt  lt span gt AND lt  span gt   lt strong gt The lt  strong gt  lazy cat  lt  li gt   lt li gt  lt span gt OR lt  span gt    lt strong gt The lt  strong gt  active goldfish  lt  li gt    and in the css  li  position relative padding-left 80px      80px or something else li span  position absolute top 0 left 0   li strong  color red      red or else   so  when the li element is relative you format the span element to be as absolute and at the top 0 left 0  so it stays upper left and you set the padding-left  or  padding 0px 0px 0px 80px   to set this free space for span element   It should work better for simple cases

User · Answer

Well  there s always the brute force method    lt li gt  lt pre gt     The lazy dog  lt  pre gt  lt  li gt   lt li gt  lt pre gt AND The lazy cat  lt  pre gt  lt  li gt   lt li gt  lt pre gt OR  The active goldfish  lt  pre gt  lt  li gt    Or is that what you meant by  padding  the text  That s an ambiguous work in this context   This sounds kind of like a homework question  I hope you re not trying to get us to do your homework for you

User · Answer

You can do it using a table  but it is not pure CSS    lt style gt  ul      text-indent  40px     li      list-style-type  none      padding  0     span      color   ff0000      position  relative      left  -40px     lt  style gt     lt ul gt   lt span gt  lt  span gt  lt li gt The lazy dog  lt  li gt   lt span gt AND lt  span gt  lt li gt The lazy cat  lt  li gt   lt span gt OR lt  span gt  lt li gt The active goldfish  lt  li gt   lt  ul gt    Note that it doesn t display exactly like you want  because it switches line on each option  However  I hope that this helps you come closer to the answer

User · Answer

try this    gt   lt span class  input-group-addon  style  padding-left 6    gt  padding-right 6   width 150px  overflow  auto   gt

User · Answer

Unfortunately inline elements  or elements having display inline  ignore the width property  You should use floating divs instead    lt style type  text css  gt  div f1   float  left  width  20px    div f2   float  left    div f3   clear  both     lt  style gt    lt div class  f1  gt  lt  div gt  lt div class  f2  gt The Lazy dog lt  div gt  lt div class  f3  gt  lt  div gt   lt div class  f1  gt AND lt  div gt  lt div class  f2  gt The Lazy cat lt  div gt  lt div class  f3  gt  lt  div gt   lt div class  f1  gt OR lt  div gt  lt div class  f2  gt The active goldfish lt  div gt  lt div class  f3  gt  lt  div gt    Now I see you need to use spans and lists  so we need to rewrite this a little bit    lt html gt  lt head gt   lt style type  text css  gt          span f1   display  block  float  left  clear  left  width  60px        li   list-style-type  none         lt  style gt    lt  head gt  lt body gt   lt ul gt   lt li gt  lt span class  f1  gt  amp nbsp  lt  span gt The lazy dog  lt  li gt   lt li gt  lt span class  f1  gt AND lt  span gt  The lazy cat  lt  li gt   lt li gt  lt span class  f1  gt OR lt  span gt  The active goldfish  lt  li gt   lt  ul gt   lt  body gt   lt  html gt

User · Answer

lt style type  text css  gt   span     position absolute    width  50px      lt  style gt    You can do this method for assigning width for inline elements

User · Answer

Unfortunately inline elements  or elements having display inline  ignore the width property  You should use floating divs instead    lt style type  text css  gt  div f1   float  left  width  20px    div f2   float  left    div f3   clear  both     lt  style gt    lt div class  f1  gt  lt  div gt  lt div class  f2  gt The Lazy dog lt  div gt  lt div class  f3  gt  lt  div gt   lt div class  f1  gt AND lt  div gt  lt div class  f2  gt The Lazy cat lt  div gt  lt div class  f3  gt  lt  div gt   lt div class  f1  gt OR lt  div gt  lt div class  f2  gt The active goldfish lt  div gt  lt div class  f3  gt  lt  div gt    Now I see you need to use spans and lists  so we need to rewrite this a little bit    lt html gt  lt head gt   lt style type  text css  gt          span f1   display  block  float  left  clear  left  width  60px        li   list-style-type  none         lt  style gt    lt  head gt  lt body gt   lt ul gt   lt li gt  lt span class  f1  gt  amp nbsp  lt  span gt The lazy dog  lt  li gt   lt li gt  lt span class  f1  gt AND lt  span gt  The lazy cat  lt  li gt   lt li gt  lt span class  f1  gt OR lt  span gt  The active goldfish  lt  li gt   lt  ul gt   lt  body gt   lt  html gt

User · Answer

People span in this case cant be a block element because rest of the text in between li elements will go down  Also using float is very bad idea because you will need to set width for whole li element and this width will need to be the same as width of whole ul element or other container   Try something like this in html    lt li gt  lt span gt  lt  span gt  lt strong gt The lt  strong gt  lazy dog  lt  li gt   lt li gt  lt span gt AND lt  span gt   lt strong gt The lt  strong gt  lazy cat  lt  li gt   lt li gt  lt span gt OR lt  span gt    lt strong gt The lt  strong gt  active goldfish  lt  li gt    and in the css  li  position relative padding-left 80px      80px or something else li span  position absolute top 0 left 0   li strong  color red      red or else   so  when the li element is relative you format the span element to be as absolute and at the top 0 left 0  so it stays upper left and you set the padding-left  or  padding 0px 0px 0px 80px   to set this free space for span element   It should work better for simple cases

[html] CSS fixed width in a span

Examples related to html

Examples related to css