使用寬度對齊輸入文本框

我有以下輸入文本框，但我已將它們與{width：xxx px;}進行了對齊，這不是一種好的做法，因爲它不會始終正確對齊。使用寬度對齊輸入文本框

<style> 
#left_col p { 
    margin-top: 15px; 
    margin-bottom: 15px; 
} 
.notvis { 
    display: none; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 
#ws_doc_txt { 
    width: 350px; 
} 
#ws_end_txt { 
    width: 358px; 
} 
#ws_ns_txt { 
    width: 340px; 
} 
#ws_op_txt { 
    width: 25%; 
} 
#left_col { 
    float: left; 
    width: 480px; 
    padding: 0 0 0 0; 
} 
#right_col { 
    margin: 0 0 0 500px; 
    padding: 0 0 0 0; 
    text-align: left; 
} 
#textarea1 { 
    text-align: left; 
} 
#button1 { 
    margin-top: 20px; 
    margin-bottom: 20px; 
} 
.greentxt { 
    color: green; 
} 
.redtxt { 
    color: red; 
} 
</style> 
</head> 

<body> 
<div id="left_col"> 
    <p> 
    <label> 
     <input type="radio" name="ws_type" value="WSDL" id="ws_type_0"> 
     WSDL</label> 
    <label> 
     <input type="radio" name="ws_type" value="NOWSDL" id="ws_type_1"> 
     Endpoint</label> 
    </p> 
    <p id="ws_doc"> 
    <label for="ws_doc">Document:</label> 
    <input type="text" name="ws_doc" id="ws_doc_txt"> 
    </p> 
    <p id="ws_end"> 
    <label for="ws_end">Endpoint:</label> 
    <input type="text" name="ws_end" id="ws_end_txt"> 
    </p> 
    <p id="ws_ns"> 
    <label for="ws_ns">Namespace:</label> 
    <input type="text" name="ws_ns" id="ws_ns_txt"> 
    </p> 
    <p> 
    <label for="ws_op">Operation:</label> 
    <input type="text" name="ws_op" id="ws_op_txt"> 
    </p> 
    <p> 
    <label for="ws_par">Parameter:</label> 
    <input type="text" name="ws_par" id="ws_par_txt"> 
    </p> 
    <p> 
    <label for="ws_val">Value:</label> 
    <input type="text" name="ws_val" id="ws_val_txt"> 
    </p> 
    <input type="submit" name="test" value="Test"> 
</div>

什麼是正確的方法來使文本框的寬度總是停在右側的某個點？另外，是否使用<p>標記使輸入的行爲與塊元素錯誤？我可以用css讓它們在每一行保持1嗎？謝謝

來源

2015-07-20 Penelope Aether Mitsubishi

考慮使用表格將所有輸入對齊在左側。給所有輸入相同的寬度，然後將它們完美對齊。

#left_table input { 
 
    width:350px; 
 
}

<table id="left_table"> 
 
    <tr> 
 
    <td><label for="ws_doc">Document:</label></td> 
 
    <td><input type="text" name="ws_doc" id="ws_doc_txt"> 
 
    </tr> 
 
    <tr> 
 
    <td><label for="ws_end">Endpoint:</label></td> 
 
    <td><input type="text" name="ws_end" id="ws_end_txt"> 
 
    </tr> 
 
    <!-- etc... --> 
 
</table>

來源

2015-07-20 17:55:53 FWDekker

，如果你希望所有的文本框有適當的定位相同的屬性，你可以試試這個（顯然設置恰當的值）：

input[type='text'] 
{ 
    width: 270px; 
    height: 30px; 
    top: 167px; 
    left: 43px; 
    position:relative; 
    margin-left: 10px; 
    background-color: #F3F3F3; 
    border: 1px solid #D6D6C2; 
    border-radius: 3px;

}

來源

2015-07-20 18:15:00

使用寬度對齊輸入文本框

回答

相關問題