Positionnement CSS: Pourquoi ne pas l'attribut width de travail pour ces divs?

Je suis en train d'élaborer un nouveau code HTML/CSS de l'écran. J'ai deux champs:

  • Cellulaire Personnel
  • De Courriel Personnelle

Les deux sont contrôlées par la même classe CSS( eci_text), les deux sont dans un div. La mise en valeurs de largeur pour que la classe ne semble pas avoir d'effet sur la div. Pourquoi et que puis-je faire à ce sujet? Je voudrais que les champs de texte à côté de chacune des 2 chaînes au-dessus de la ligne jusqu'à la verticale ( c'est pourquoi je veux ajuster la largeur de la eci_text divs )

Merci beaucoup à l'avance

Steve

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Acme Emergency Page</title>
<style TYPE="text/css">
body 
{
background-color:white;
}
#container
{
margin-left:auto;
margin-right:auto;
text-align:center;
width: 99%;
font-family:Arial,Helvetica;
font-size:10pt;
}
#eci_container
{
margin-left:auto;
margin-right:auto;
width:500px;
text-align:center;
}
.paragrah_left
{
text-align:left;
}
.eci_textfield_container
{
text-align:left;
}
.eci_text
{
text-align:left;
display:inline;
width:150px;
}
.eci_textfield
{
text-align:left;
display:inline;
}
.eci_checkbox
{
margin-left:40px;
text-align:left;
}
</style>
</head>
<body>
<div id="container">
<!-- Content: Start div content: Main content area -->
<div id="content">
<h2>ACME Emergency Contact Information </h2>
<!-- Start: ECI Container -->
<div id = "eci_container">
<p class = "paragrah_left">
This voluntary information will only be used by the ACME Emergency 
Fruit & Vegetable System (FAV) to tell you about emergencies when they 
arise, whether you are at work or not.
</p>
<div class = "eci_textfield_container">
<div class = "eci_text">        
Personal Cell*: 
</div>
<div class = "eci_textfield">  
<input type = "text" name= "personal_cell_phone_number">
</div>
</div>
<div class = "eci_checkbox">
<input type = "checkbox" name = "checkBoxVisiblePersonalCellPhoneNumber">
Make my personal cell phone number visible to Mark Zuckerberg's staff
</div>
<div class = "eci_checkbox">
<input type = "checkbox" name = "checkBoxUsePersonalCellPhoneNumberForAlerts">
Use this number for ENS SMS text alerts
</div>
<p class = "paragrah_left">
If you do not want your personal cell phone used, please call
</p>
<div class = "eci_textfield_container">
<div class = "eci_text">
Personal Email*:
</div>
<div class = "eci_textfield">  
<input type = "text" name= "personal_email">
</div>
</div>
<p class = "paragrah_left">
If you do not want your personal email used please call
</p>
<!-- End: ECI Container -->
</div>
<!-- Content: Close div id ="content"  -->
</div>
</body>
</html>
  • Qui divs est le problème?
  • Il serait plus facile pour nous de vous aider si nous n'avions pas de regarder l'ensemble de votre forme pour résoudre le problème. Pouvez-vous supprimer le supplément de balisage et les feuilles de style CSS comme les paragraphes, les conteneurs et les cases à cocher?
InformationsquelleAutor Steve | 2012-10-02