Проблемы с формами и CSS

Это follow up to this question. Я попытался придумать решение, которое позволило мне иметь встроенные метки в многоколоночной форме, прочитав некоторые ответы, представленные в упомянутом выше вопросе, я понял, что это намного проще, чем я изначально хотя, это мой прототип:Проблемы с формами и CSS

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
._20 { 
    width: 16%; 
    display: inline; 
    float: left; 
    margin-left: 2%; 
    margin-right: 2%; 
} 
._30 { 
    width: 26%; 
    display: inline; 
    float: left; 
    margin-left: 2%; 
    margin-right: 2%; 
} 
label { 
    border: 1px solid #B3B3B3; 
    font-family: inherit; 
    padding: 3px; 
    width: 100%; 
} 
input { 
    border: 1px solid #B3B3B3; 
    font-family: inherit; 
    padding: 3px; 
    width: 100%; 
} 
.box { 
    padding: 10px; 
    margin: 10px 0px; 
    background-color: #666; 
} 
.content { 
    background-color: #FFFFFF; 
    padding: 10px; 
    -moz-border-radius: 6px; 
} 
</style> 
</head> 

<body> 

<div class="box"> 
    <div class="content"> 
     <div class="_20"> 
      <p><label>Name:</label></p> 
     </div> 
     <div class="_30"> 
      <p><input type="text" id="" /></p> 
     </div> 
     <div class="_20"> 
      <p><label>Email:</label></p> 
     </div> 
     <div class="_30"> 
      <p><input type="text" id="" /></p> 
     </div> 
    </div> 
</div> 

</body> 
</html>

в теории это, кажется, работает, но на практике все, что я получаю это очень странно, результат (в FF 3.5.6):

weird result screenshot http://i45.tinypic.com/mb5q48.jpg

Если Я бросаю теги p вокруг ярлыков и немного меняю результат:

weird result without p tags screenshot http://i46.tinypic.com/24wqzp5.jpg

Что случилось? Есть ли какой-нибудь хак, который я должен использовать?

Как разместить ярлыки/входы внутри коробки, как они предполагают?

Я ценю весь вход, спасибо.

источник

2009-12-27 Alix Axel

Почему вы используете теги абзацев для полей формы? –

@NSD: Я основывался на сетке fluid960, которая также использует теги 'p' в полях формы, но теперь я обновляю вопрос. –

Попробуйте это:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
._20 { 
    width: 16%; 
    display: inline; 
    float: left; 
    margin-left: 2%; 
    margin-right: 2%; 
} 
._30 { 
    width: 26%; 
    display: inline; 
    float: left; 
    margin-left: 2%; 
    margin-right: 2%; 
} 
label { 
    border: 1px solid #B3B3B3; 
    font-family: inherit; 
    padding: 3px; 
    width: 100%; 
} 
input { 
    border: 1px solid #B3B3B3; 
    font-family: inherit; 
    padding: 3px; 
    width: 100%; 
} 
.box { 
    padding: 10px; 
    margin: 10px 0px; 
    background-color: #666; 
} 
.content { 
    background-color: #FFFFFF; 
    padding: 10px; 
    -moz-border-radius: 6px; 
    overflow:hidden; 
} 
</style> 
</head> 

<body> 

<div class="box"> 
    <div class="content"> 
     <div class="_20"> 
       <p><label>Name:</label></p> 
     </div> 
     <div class="_30"> 
       <p><input type="text" id="" /></p> 
     </div> 
     <div class="_20"> 
       <p><label>Email:</label></p> 
     </div> 
     <div class="_30"> 
       <p><input type="text" id="" /></p> 
     </div> 
    </div> 
</div> 

</body> 
</html>

BTW, Проверьте это: How to create perfect form Markup and style it with CSS

источник

2009-12-27 02:26:25 3zzy

=) Спасибо Nimbuz, как для решения, так и для ссылки. Вы очень помогли. –

np :) Убедитесь, что вы добавили ширину в контент, если хотите также поддерживать IE6. – 3zzy

Ох .... Кошмар IE6.= (( –

Вы должны начать с самим простым осуществлением, который работает и построить любую фантазию укладки вы хотите оттуда. Избавление от всех посторонних тегов, все, что вам действительно нужно:

<div class="box"> 
    <div class="content"> 
     <label>Name:</label> 
     <input type="text" /> 
    </div> 
</div>

Вам не нужно, чтобы добавить больше див и абзацы, чтобы получить его, чтобы привязать к сетке, просто стилизовать элементы, которые уже есть.

источник

2009-12-27 02:37:32

Это один из них. Главное - ясное: оба; div внизу, но есть еще несколько вещей, которые тоже изменились.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
._20 { 
    width: 16%; 
    display: inline; 
    float: left; 
    margin-left: 2%; 
    margin-right: 2%; 
} 
._30 { 
    width: 26%; 
    display: inline; 
    float: left; 
    margin-left: 2%; 
    margin-right: 2%; 
} 
label { 
    border: 1px solid #B3B3B3; 
    font-family: inherit; 
    padding: 3px; 
    width: 100%; 
} 
input { 
    border: 1px solid #B3B3B3; 
    font-family: inherit; 
    padding: 3px; 
    width: 100%; 
} 
.box { 
    padding: 10px; 
    background-color: #666; 
} 
.content { 
    background-color: #FFFFFF; 
    -moz-border-radius: 6px; 
} 
</style> 
</head> 

<body> 

<div class="box"> 
    <div class="content"> 
     <div class="_20"> 
       <label>Name:</label> 
     </div> 
     <div class="_30"> 
       <input type="text" id="" /> 
     </div> 
     <div class="_20"> 
       <label>Email:</label> 
     </div> 
     <div class="_30"> 
       <input type="text" id="" /> 
     </div> 
     <div style="clear:both;"></div> 
    </div> 
</div> 

</body> 
</html>

источник

2009-12-27 02:37:50

первую очередь вам необходимо сбросить отступы и поля на <p> элементов

p,label{ 
padding:0; 
margin:0 
}

во-вторых, вы плывете элементы внутри блока элемента, не очищая их позже ... поэтому проблема переполнения ... вот рабочая версия кода http://jsbin.com/eheva3

Примечание: Я использовал clearit метод, который требует дополнительной разметки
Вы можете использовать это или метод clearfix ... google для «clearfix», чтобы узнать больше

источник

2009-12-27 02:38:15 ekhaled

Проблемы с формами и CSS

ответ

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