Question

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

个人细胞
个人电子邮件

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

非常感谢提前

史蒂夫

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

Answer 1

您是否尝试过显示：阻止，并向左浮动？

Answer 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>

...等......

Answer 3

        .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;
    }

Answer 4

宽度适用于包含字段标签的两个div。如果在Firefox中使用Firebug扩展，则可以检查元素并查看标签是您在CSS中指定的宽度（150px）。你在实际看到这个问题的浏览器是什么？

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

CSS定位：为什么width属性不适用于这些div？

4 个答案: