Выравнивание входных текстовых полей с использованием ширины

У меня есть следующие текстовые поля ввода, но я выровнял их в css с помощью {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

Выравнивание входных текстовых полей с использованием ширины

ответ

Смежные вопросы