Question

我有以下输入文本框，但我已使用{width：xxx px;}将它们与css对齐，这不是一个好习惯，因为它不会始终正确对齐。

<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分吗？感谢

Answer 1

考虑使用表格将所有输入对齐在左侧。为所有输入提供相同的宽度，然后在右侧完美对齐。

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

Answer 2

如果您希望所有文本框具有相同的属性并具有正确的定位，您可以尝试这一点（显然设置正确的值）：

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;

}

使用宽度对齐输入文本框

2 个答案: