CSS стили divs и абзацы

Question

У меня есть страница, которая дает мне две проблемы, когда я пытаюсь стилизовать ее с помощью CSS. Сначала код:

HTML:

<div class="formarea"> 

    <div class="formimg">Du själv:</div> 

    <div class="formtext"> 

     <p class="inhead">Personuppgifter:</p> 

     <p class="tdone" id="namespan">Namn</p>  <p class="tdtwo"><input type="text" name="graduate[name]" id="name" /></p> 
     <p class="tdone" id="addrspan">Adress</p>  <p class="tdtwo"><input type="text" name="graduate[address]" id="address" /></p> 
     <p class="tdone" id="postspan">Postadress</p> <p class="tdtwo"><input type="text" name="graduate[postal]" id="postal" /></p> 
     <p class="tdone" id="mailspan">E-post</p>  <p class="tdtwo"><input type="text" name="graduate[email]" id="email" /></p> 
     <p class="tdone" id="phonspan">Mobilnummer</p> <p class="tdtwo"><input type="text" name="graduate[phone]" id="phone" /></p> 
     <p class="tdone" id="pnrspan">Personnummer</p> <p class="tdtwo"><input type="text" name="graduate[pnr]" id="pnr" /></p> 

     <p class="inhead">Matalternativ:</p>    

     <p class="tdone">Vegetarian (vegan etc. fyll även i detta nedan)</p><p class="tdtwo"><input type="checkbox" name="graduate[veg]" value="Ja" /></p> 
     <p class="tdone">Allergier och andra matpreferenser</p><p class="tdtwo"><textarea name="graduate[allergies]" id="allergies"></textarea></p> 

     <p class="inhead">Alkoholalternativ:</p> 

     <p class="tdone">Öl</p><p class="tdtwo"><input type="radio" name="graduate[drink]" value="Öl" checked /></p> 
     <p class="tdone">Cider</p><p class="tdtwo"><input type="radio" name="graduate[drink]" value="Cider" /></p> 
     <p class="tdone">Alkoholfritt</p><p class="tdtwo"><input type="checkbox" name="graduate[alcfree]" value="Ja" /></p> 
    </div> 
</div> 

И CSS: тело { }

.formarea { 
    margin:auto; 
    margin-top:25px; 
    padding:0px; 
    border:none; 
    width:364px; 
    position:relative; 
    background-color:#eeeeee; 
} 

.formimg { 
    margin-top:0px; 
    margin-left:0px; 
    padding:0px;  
    border:none; 
    width:45px; 
    height:45px; 
    background-color:#dddddd; 
} 

.formtext { 
    margin-top:-45px; 
    margin-bottom:0px; 
    margin-left:64px; 
    padding:0px; 
    border:none; 
    width:300px; 
    float:left; 
    clear:both; 
    background-color:#cccccc; 
} 

.inhead { 
    margin-top:0px; 
    margin-bottom:2px; 
    padding:0px; 
    border:none; 
    width:300px; 
    font-size:20px; 
} 

.tdone { 
    margin-top:2px; 
    margin-bottom:2px; 
    padding:0px; 
    width:150px; 
    float:left; 
    text-align:left; 
} 

.tdtwo { 
    margin-top:2px; 
    margin-bottom:2px; 
    padding:0px; 
    width:150px; 
    float:left; 
    text-align:left; 
} 

.tdtwo input { 
    margin-top:0px; 
    margin-bottom:0px; 
    width:150px; 
} 

.tdtwo textarea { 
    margin-top:0px; 
    margin-bottom:0px; 
    width:150px; 
} 

Вот картина, если результат:

Result of css http://i39.tinypic.com/2akbe4x.png

Как вы можете видеть, код работает отлично dow n на «Matalternativ:», но потом происходит что-то странное. Мне удалось выяснить, что причина этого в том, что текст нуждается в двух дорогах. Простое (но очень уродливое) решение состоит в том, чтобы увеличить высоту «.tdone» и «.tdtwo» до числа выше высоты двух строк, но это не очень хорошо.

Я также пытался играть с переполнением собственности, но это, казалось, не помогло мне.

Это делает два вопроса:

1: Есть причины, не желая идентификатор, потому что это не поможет мне позже в части кода не показано здесь, где та же проблема появится. Есть ли свойство css, которое поможет мне, когда строка слишком высока, отличная от размещения идентификатора на этом конкретном элементе?

2: Как вы можете видеть, радиокнопки и флажки выравниваются в центре абзаца, который они заполняют. Я попробовал «text-align: left;» и "Float: left;" внутри «.tdtwo input», которое не имело никакого значения. Есть ли способ сделать перемещение влево в параграфе?

---

EDIT:

После того как я добавил @ tw16: s ответ, я добавил остаток HTML:

<?php for($i=1; $i<4; $i++): ?> 
    <div class="formarea"> 
     <div class="formimg">Gäst <?php echo $i; ?>:</div> 

     <div class="formtext"> 

      <p class="inhead">Personuppgifter:</p> 

      <p class="tdone" id="namespanG<?php echo $i; ?>">Namn</p><p class="tdtwo"><input type="text" name="guest[<?php echo $i; ?>][name]" id="nameG<?php echo $i; ?>" /></p> 

      <p class="inhead">Matalternativ:</p>  

      <p class="tdone">Vegetarian (vegan etc. fyll även i detta nedan)</p><p class="tdtwo"><input type="checkbox" name="guest[<?php echo $i; ?>][veg]" value="Ja" /></p> 
      <p class="tdone">Allergier och andra matpreferenser</p><p class="tdtwo"><textarea name="guest[<?php echo $i; ?>][allergies]" id="allergiesG<?php echo $i; ?>"></textarea></p> 

      <p class="inhead">Alkoholalternativ:</p> 

      <p class="tdone">Öl</p><p class="tdtwo"><input type="radio" name="guest[<?php echo $i; ?>][drink]" value="Öl" checked /></p> 
      <p class="tdone">Cider</p><p class="tdtwo"><input type="radio" name="guest[<?php echo $i; ?>][drink]" value="Cider" /></p> 
      <p class="tdone">Alkoholfritt</p><p class="tdtwo"><input type="checkbox" name="guest[<?php echo $i; ?>][alcfree]" value="Ja" /></p> 

     </div> 
    </div> 
<?php endfor; ?> 

<div class="pbutton"><input type="submit" value="Anmäl dig" /></div> 

Результат был "интересным":

Result of css http://i43.tinypic.com/11b2kvd.png

Я предполагаю, что причина в том, что «formarea» не заполнены полностью, doonon Знаете, что с этим делать?

Answer 1

Чтобы исправить проблемы alingment, вам нужно использовать clear: left, как показано ниже:

.inhead { 
    margin-top:0px; 
    margin-bottom:2px; 
    padding:0px; 
    border:none; 
    width:300px; 
    font-size:20px; 
    clear: left /* add this */ 
} 

.tdone { 
    margin-top:2px; 
    margin-bottom:2px; 
    padding:0px; 
    width:150px; 
    float:left; 
    text-align:left; 
    clear: left /* add this */ 
} 

Чтобы остановить радио и флажок входы от центра выравнивания, вам нужно добавить это правило в конце вашего CSS:

input[type="radio"], 
input[type="checkbox"] { 
    width: auto; 
}