Question

我正试图制作一个“垫子”，但我完全迷失了如何这样做。

如果你去小提琴，你会看到“内容”被填充。这是故意的，我知道如何用表格来做这件事。

然而，使用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/

更新了小提琴，解决了这个问题： http://jsfiddle.net/tL98L/18/

Answer 1

使用<div class="wrapper">包围您想要填充的所有内容，并将其添加到您的css：

.wrapper { padding-left: 15px }

那应该有用

Answer 2

嗨Erick你可以试试下面的代码，如果你需要的话，请告诉我。

<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 个答案: