1

我正在开发一个新的 HTML/CSS 屏幕。我两个领域：

  • 个人手机
  • 个人电邮

两者都由同一个 CSS 类（eci_text）控制，都在一个 div 中。为该类输入宽度值似乎对 div 没有影响。为什么会这样，我能做些什么呢？我希望上面两个字符串旁边的文本字段垂直排列（这就是为什么我要调整 eci_text divs 的宽度）

非常感谢提前

史蒂夫

<!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>
4

4 回答 4

4

您是否尝试过显示：块和向左浮动？

于 2012-10-02T19:41:00.573 回答
2

使用列表和标签而不是 DIV。DIV 没有任何意义。列表和标签是使用语义 HTML 的一个很好的部分。

见：http ://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=406

<form action="#" class="myform">
    <fieldset>
        <legend>Leave a Comment</legend>
        <ul>
            <li>
                <label for="name">Name:</label>
                <input id="name" />
            </li>
        </ul>

... ETC...

于 2012-10-02T19:41:18.303 回答
0 
        .eci_textfield_container
    {
        text-align:left;
        float:left;
        width:100%;
    }
    .eci_text
    {
        text-align:left;
        display:block;
        width:150px;
        float:left;
    }

    .eci_textfield
    {
        text-align:left;
        display:block;
        float:left;
    }
于 2012-10-02T19:44:12.597 回答
0

宽度应用于包含字段标签的两个 div。如果您在 Firefox 中使用 Firebug 扩展，您可以检查元素并查看标签是否为您在 CSS 中指定的宽度 (150px)。您实际上在哪个浏览器中看到此问题？

此外，对于字段标签，您应该使用标签。

于 2012-10-02T19:44:14.220 回答