HTML如何填充內容

Question

我正在嘗試制作“ Pad”，但是我完全不知道該怎么做。

如果轉到小提琴，則會看到“內容”已填充。 這是有目的的，我知道如何使用表來執行此操作。

但是，在包含javascript的部分中，我發現，如果包含一個表，則無論腳本和div標簽如何，都將顯示所有內容，這不是我想要的。

我需要找到一種方法來填充“內容”之后的部分，以便對齊。 也許我在構造表時不正確，在這一點上，我對如果不使用HTML中的表怎么做會感到好奇。

任何幫助都將不勝感激。

Javascript：

function selection(){
    var myEvaluator = addendaList.options[addendaList.selectedIndex].value;
    var referenceNumberId = document.getElementById("referenceNumberBlock");
    var deliveryIdentificationId = document.getElementById("deliveryIdentificationBlock");
    var currencyISOCodeId = document.getElementById("currencyISOCodeBlock");
    var referenceTrafficId = document.getElementById("referenceTrafficBlock");

    if( myEvaluator == "IMP" ) {
        referenceNumberId.style.display         = "block";
        deliveryIdentificationId.style.display  = "block";
        currencyISOCodeId.style.display         = "none";
        referenceTrafficId.style.display        = "none";
    } else if ( myEvaluator == "EXP" ) {
        referenceNumberId.style.display         = "none";
        deliveryIdentificationId.style.display  = "none";
        currencyISOCodeId.style.display         = "block";
        referenceTrafficId.style.display        = "block";
    }
}

的HTML

<body>
<table width="620" align="center" cellpadding="0" cellspacing="0">
    <td width="160" valign="top">
        <b>Content</b>
    </td>
</table>

    <b>Select an option:  </b>
    <select name = "code" id = "addendaList" onChange = "select()">
        <option value = "IMP">Import</option>
        <option value = "EXP">Export</option>
    </select>

    <div ID = "referenceNumberBlock" style = "display:block;">
        <b>Reference Number: </b>
            <input name = "referenceNumber" id = "referenceNumber" type = "text" size = "16" maxlength="15" value = "">
    </div>

    <div ID = "deliveryIdentificationBlock" style = "display:block;">
        <b>Delivery Identification: </b>
            <input id = "deliveryIdentification" name = "deliveryIDentification" type = "text" size = "16" maxlength = "30" value = "">
    </div>

    <div ID = "currencyISOCodeBlock" style = "display:none;">
        <b>Currency ISO Code: </b>
             <select id = "ISOCodes" name = "currencyISOCode">
                 <option value = "MXN">MXN</option>
                 <option value = "USD">USD</option>
             </select>
    </div>

    <div ID = "referenceTrafficBlock" style ="display:none;">
        <b>Traffic Number: </b>
            <input name = "referenceTraffic" type = "text" size = "16" maxlength = "20" value = "">
    <div>
</body>

小提琴： http : //jsfiddle.net/tL98L/4/

解決了更新的Fiddle的問題： http : //jsfiddle.net/tL98L/18/

Answer 1

用<div class="wrapper">包圍要填充的所有內容，並將其添加到CSS中：

.wrapper { padding-left: 15px }

那應該工作

Answer 2

嗨，埃里克，如果您還有其他需要，可以請嘗試以下代碼，然后告訴我。

<style type="text/css">
    #mydata tr td
    {
        padding-left:5px;
    }
    #mydata tr td:first-child
    {
        text-align:right;
    }
    #mydata input[type="text"]
    {
        width:170px;
        height:27px;        
    }
    select
    {
        width:179px;
        height:33px;
    }
    #mydata input[type="text"] , select
    {
        padding-left:5px;
    }

    </style>


<div>
<table id="mydata">
<tr>
<td>Select an Option:</td>
<td>
<select name = "code" id = "addendaList" onChange = "select()">
        <option value = "IMP">Import</option>
        <option value = "EXP">Export</option>
    </select>
</td>
</tr>
<tr>
<td>Reference Number:</td>
<td><input name = "referenceNumber" id = "referenceNumber" type = "text" size = "16" maxlength="15" value = ""></td>
</tr>
<tr>
<td>Delivery Identification:</td>
<td><input id = "deliveryIdentification" name = "deliveryIDentification" type = "text" size = "16" maxlength = "30" value = ""></td>
</tr>
</table>
</div>

HTML如何填充內容

問題描述

2 個解決方案

解決方案1
1 已采納 2014-05-15 11:00:32

解決方案2
1 2014-05-15 11:21:44

HTML如何填充內容

問題描述

2 個解決方案

解決方案1 1 已采納 2014-05-15 11:00:32

解決方案2 1 2014-05-15 11:21:44

解決方案1
1 已采納 2014-05-15 11:00:32

解決方案2
1 2014-05-15 11:21:44