css label width not taking effect

Question

I have a generic form  which I d like to style to align the labels and the input fields  For some reason when I give a width to the label selector  nothing happens   HTML       lt form id  report-upload-form  method  POST  action    enctype  multipart form-data  gt       lt p gt           lt label for  id title  gt Title  lt  label gt            lt input id  id title  type  text  class  input-text  name  title  gt  lt  p gt       lt p gt           lt label for  id description  gt Description  lt  label gt            lt textarea id  id description  rows  10  cols  40  name  description  gt  lt  textarea gt  lt  p gt       lt p gt           lt label for  id report  gt Upload Report  lt  label gt            lt input id  id report  type  file  class  input-file  name  report  gt       lt  p gt   lt  form gt    CSS     report-upload-form       background-color   316091      color   ddeff1      font-weight bold      margin  23px auto 0 auto      border-radius 10px      width  650px      box-shadow   0 0 2px 2px  d9d9d9      report-upload-form label       padding-left 26px      width 125px      text-transform  uppercase      report-upload-form input type text     report-upload-form input type file    report-upload-form textarea       width  305px      Output     jsFiddle  What am I doing wrong

User · Answer

give the style  display inline-block    hope this will help

User · Answer

I believe labels are inline  and so they don t take a width  Maybe try using  display  block  and going from there

User · Answer

Make it a block first  then float left to stop pushing the next block in to a new line     report-upload-form label                              padding-left 26px                             width 125px                             text-transform  uppercase                             display block                             float left

User · Answer

Do display  inline-block    report-upload-form label       padding-left 26px      width 125px      text-transform  uppercase      display inline-block     http   jsfiddle net aqMN4

User · Answer

label s default display mode is inline  which means it automatically sizes itself to it s content  To set a width you ll need to set display block and then do some faffing to get it positioned correctly  probably involving float

User · Answer

Use display  inline-block   Explanation   The label is an inline element  meaning it is only as big as it needs to be   Set the display property to either inline-block or block in order for the width property to take effect   Example    x000D   x000D   report-upload-form   x000D      background-color   316091  x000D      color   ddeff1  x000D      font-weight  bold  x000D      margin  23px auto 0 auto  x000D      border-radius  10px  x000D      width  650px  x000D      box-shadow  0 0 2px 2px  d9d9d9  x000D   x000D    x000D   x000D   report-upload-form label   x000D      padding-left  26px  x000D      width  125px  x000D      text-transform  uppercase  x000D      display  inline-block  x000D    x000D   x000D   report-upload-form input type text    x000D   report-upload-form input type file   x000D   report-upload-form textarea   x000D      width  305px  x000D    x000D   lt form id  report-upload-form  method  POST  action    enctype  multipart form-data  gt  x000D       lt p gt  lt label for  id title  gt Title  lt  label gt   lt input id  id title  type  text  class  input-text  name  title  gt  lt  p gt  x000D       lt p gt  lt label for  id description  gt Description  lt  label gt   lt textarea id  id description  rows  10  cols  40  name  description  gt  lt  textarea gt  lt  p gt  x000D       lt p gt  lt label for  id report  gt Upload Report  lt  label gt   lt input id  id report  type  file  class  input-file  name  report  gt  lt  p gt  x000D   lt  form gt  x000D   x000D   x000D

[html] css label width not taking effect

Examples related to html

Examples related to css

Examples related to label