1

新しい HTML/CSS 画面を開発しています。I 2 つのフィールド:

  • パーソナルセル
  • 個人的なメール

両方とも同じ CSS クラス (eci_text) によって制御され、両方とも div にあります。そのクラスの幅の値を入れても、divには影響がないようです。それはなぜですか、それについて私は何ができますか? 上記の 2 つの文字列のそれぞれの横にあるテキスト フィールドを縦に並べたいと思います (そのため、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>
4

4 に答える 4

4

display:block とフローティング レフトを試しましたか?

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

...など...

于 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 に答える