Как сделать текст под текстовым полем?

сделать что-то, как и в HTML/CSSКак сделать текст под текстовым полем?

alt text

2010-10-01 soldier.moth

Вы готовы принять любые ограничения кросс-браузер? У этого * есть * для работы в IE 6 ..? –

не должен работать ie6 –

Это облегчение, так как [мой ответ] (http://stackoverflow.com/questions/3843547/how-can-i-render-text-under-a-textbox/3843599#3843599), вероятно, нет. –

Это похоже на ответ @Gus', но немного больше семантическое:

<form action="" method="post"> 
    <fieldset> 
    <input type="text" name="day" id="day" /> 
    <label for="day">Day</label> 
    </fieldset> 
    <fieldset> 
    <input type="text" name="hour" id="hour" /> 
    <label for="hour">Hour</label> 
    </fieldset> 
    <fieldset> 
    <input type="text" name="min" id="min" /> 
    <label for="min">Min</label> 
    </fieldset> 
    <fieldset> 
    <input type="text" name="sec" id="sec" /> 
    <label for="sec">Sec</label> 
    </fieldset> 
</form>

С foll за счет CSS:

fieldset { 
    display: inline-block; 
    width: 10em; 
    margin: 0 1em 0 0; 
    border: 1px solid #ccc; 
} 

fieldset > input, 
fieldset > label { 
    display: block; 
    width: 8em; 
    text-align: center; 
    margin: 0 auto; 
}

Живая демонстрация размещена по адресу: jsbin.

Отредактировано, чтобы сделать его чуть-чуть симпатичнее ...

Новый CSS:

form { 
    width: 49.5em; 
    overflow: hidden; 
    border: 1px solid #ccc; 
} 
fieldset { 
    display: block; 
    float: left; 
    width: 10em; 
    margin: 0 1em 0 0; 
    border: 1px solid #ccc; 
} 
    fieldset:last-child { 
    margin: 0; 
} 

fieldset > input, 
fieldset > label { 
    display: block; 
    text-align: center; 
    margin: 0 auto; 
} 
fieldset > input { 
    width: 80%; 
    font-size: 1.4em; 
}

И пересмотрела демо (снова) на jsbin

источник

2010-10-01 23:14:25

Это грубо, но вы можете добавить абсолютно позиционированного DIV с этим текстом в ней и поместите его там, где это необходимо. Вероятно, вам также придется позиционировать текстовые поля абсолютно.

Вы также можете уйти с отрицательным отрывом вверху (возможно, не в IE).

источник

2010-10-01 23:04:36 JoshD

Вы можете делать то, что хотите, обертывая каждый вход и метку в элементах div и плавая div.

Example Here

HTML:

<div class="boxwrap"> 
    <div> 
     <input type="text" size="6" /> 
     <h5>label1</h5> 
    </div> 
    <div> 
     <input type="text" size="6" /> 
     <h5>label2</h5> 
    </div> 
    <div> 
     <input type="text" size="6" /> 
     <h5>label3</h5> 
    </div> 
</div> 
<div class="clearfloat"></div>

CSS:

div.boxwrap div { 
    float: left ; 
} 
div.boxwrap div h5 { 
    text-align: center ; 
} 
div.clearfloat { 
    clear: both ; 
}

источник

2010-10-01 23:09:43 Gus

Я понимаю, что обращать внимание на реальные (x) элементы html, кажется, выпало из моды, но серьезно?Есть несколько более семантических элементов, легко доступных и специально предназначенных для этого '' например, он обеспечивает приятное событие onClick-focus, а также семантическую связь между элементами ('label' и «вход») ... Есть больше, но я чувствую, что становлюсь мелким. –

Нет хакерство не участвует - должны быть совместимы с браузерами.

<style type="text/css"> 
body { 
    font-family: Arial, Helvetica, sans-serif; 
} 


.date-container { 
    height: 50px; 
    border: solid 1px; 
} 

.input { 
    width: 35px; 
    float: left; 
    margin: 5px; 
} 
.field input { 
    font-size: 12px; 
    margin: 0; 
    width: 35px; 
    text-align: center; 
} 

.name { 
    font-weight: bold; 
    text-transform: capitalize; 
    font-size: 11px; 
    text-align: center; 
} 

</style> 
<div class="date-container"> 
    <div class="input"> 

     <div class="field"> 
      <input type="text" name="day" id="day"> 
     </div> 
     <div class="name"> 
      day 
     </div> 
    </div> 

    <div class="input"> 

     <div class="field"> 
      <input type="text" name="hour" id="hour"> 
     </div> 
     <div class="name"> 
      Min 
     </div> 
    </div> 

    <div class="input"> 
     <div class="field"> 
      <input type="text" name="min" id="min"> 
     </div> 
     <div class="name"> 
      day 
     </div> 
    </div> 

    <div class="input"> 
     <div class="field"> 
      <input type="text" name="sec" id="sec"> 
     </div> 
     <div class="name"> 
      Sec 
     </div> 
    </div> 

</div>

источник

2010-10-01 23:19:26 Glycerine

Вот наиболее семантический подход (и он работает весь путь обратно в IE6, не беспокойтесь):

<html> 
    <head> 
     <title>Title</title> 

     <style type="text/css"> 

      fieldset { 
       border: none; 
       overflow: auto; 
      } 

      label { 
       display: block; 
       float: left; 
       font-family: Arial, Helvetica, sans-serif; 
       font-size: 75%; 
       margin-right: 10px; 
       text-align: center; 
       width: 30px; 
      } 

      input { 
       width: 30px; 
      } 

     </style> 

    </head> 
    <body> 
     <form action="#"> 
      <fieldset> 
       <label> 
        <input type="text" name="day" id="day"> 
        Day 
       </label> 
       <label> 
        <input type="text" name="hour" id="hour"> 
        Hour 
       </label> 
       <label> 
        <input type="text" name="minute" id="minute"> 
        Min 
       </label> 
       <label> 
        <input type="text" name="second" id="second"> 
        Sec 
       </label> 
      </fieldset> 
     </form> 
    </body> 
</html>

источник

2010-10-02 03:54:43 Marcus

Как сделать текст под текстовым полем?

ответ

Смежные вопросы