Question

如何让文本输入框排成一行？

密码输入框略微向左，与用户名文字输入框不对齐。

我在Eclipse中使用Java。

＆＃13;

<div>
  <div id="header">
    <h1>Login</h1>
  </div>
  <form name="loginform">
    <fieldset>
      <legend>Login Form</legend>
      <label>Username:
        <input type="text" name="username" /><span>*</span>
      </label>
      <label>Password:
        <input type="password" name="pass" /><span>*</span>
      </label>
      <input type="reset" class="resetButton" />
      <input type="submit" value="Login" class="submitButton" />
    </fieldset>
  </form>
</div>

＆＃13;

Answer 1

将用户名和密码标签包含在inline-block span中，并为span width提供。{/ p>

您更新的html如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1"/>
    <title>Test</title>
</head>
<body>
    <style tpye ="text/css">
        h1 {letter-spacing: 1px; font-size: .4in; color: green;}
        span {color: red}
        legend {font-variant: small-caps; font-weight: bold}
        fieldset{width: 300px; font-family: Arial; sans-serif;
                 background-color : limegreen}
        label {display: block; position relative; line-height: 2;
                margin: 10px 0px;}
        .text {position: absolute; margin-left: 20px; width: 15em; left: 80px}
        span.myspan{width: 100px; display:inline-block;}
    </style>
    <div>
        <div id="header">
            <h1>Login</h1>
        </div>
            <form name="loginform">
            <fieldset>
                <legend>Login Form</legend>
                <label><span class="myspan">Username:</span> <input type="text" name="username"/><span>*</span></label>
                <label><span class="myspan">Password:</span> <input type="password" name="pass"/><span>*</span></label>
                <input type="reset" class ="resetButton"/> 
                <input type="submit" value = "Login" class="submitButton"/>
            </fieldset>
            </form>
    </div>

</body>
</html>

在此测试：https://jsfiddle.net/nabtron/d4cr66oa/

Answer 2

如果您希望它是动态的，那么您需要一个网格（行/列）结构，而今天最好的一个（跨浏览器）是display: table，因为display: grid仍然被广泛支持（{ {3}} | working draft）

＆＃13;

h1 {letter-spacing: 1px; font-size: .4in; color: green;}

legend {font-variant: small-caps; font-weight: bold}

fieldset{width: 300px; font-family: Arial, sans-serif;
  background-color : limegreen}

label {display: block; position: relative; line-height: 2;}

.text {position: absolute; margin-left: 20px; width: 15em; left: 80px}

.grid {
  display: table;
}
.row {
  display: table-row;
}
.col {
  display: table-cell;
  padding: 6px 0 0 6px;
}
.col.after:after {
  content: ' *';
  color: red;
}

＆＃13;

<div>
  <div id="header">
    <h1>Login</h1>
  </div>
  <form name="loginform">
    <fieldset>
      <legend>Login Form</legend>

      <div class="grid">
        <div class="row">
          <div class="col">
            <label for="username">Username:</label>
          </div>
          <div class="col after">
            <input type="text" name="username" id="username"/>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <label for="pass">Password:</label>
          </div>
          <div class="col after">
            <input type="password" name="pass" id="pass"/>
          </div>
        </div>
        <div class="row">
          <div class="col">
          </div>
          <div class="col">
            <input type="reset" class ="resetButton"/> 
            <input type="submit" value = "Login" class="submitButton"/>
          </div>
        </div>
      </div>
      
    </fieldset>
  </form>
</div>

＆＃13;

Answer 3

在完美的W3标准世界中，您的标签将是一个独立的字段，而不是封装输入的字段。所以，例如：

<label for="username">Username:</label> 
<input id="username" type="text" name="username"/><span>*</span>

＆＃34; for＆＃34; tag指的是您必须添加的输入字段的ID。然后，样式就像添加标签样式的宽度一样简单。出于定位目的，您可以在所需的星号上显示内联，以便在输入后对其进行定位。

Answer 4

这个有用了，谢谢。

＆＃13;

h1 {letter-spacing: 1px; font-size: .4in; color: green;}

legend {font-variant: small-caps; font-weight: bold}

fieldset{width: 300px; font-family: Arial, sans-serif;
  background-color : limegreen}

label {display: block; position: relative; line-height: 2;}

.text {position: absolute; margin-left: 20px; width: 15em; left: 80px}

.grid {
  display: table;
}
.row {
  display: table-row;
}
.col {
  display: table-cell;
  padding: 6px 0 0 6px;
}
.col.after:after {
  content: ' *';
  color: red;
}

＆＃13;

<div>
  <div id="header">
    <h1>Login</h1>
  </div>
  <form name="loginform">
    <fieldset>
      <legend>Login Form</legend>

      <div class="grid">
        <div class="row">
          <div class="col">
            <label for="username">Username:</label>
          </div>
          <div class="col after">
            <input type="text" name="username" id="username"/>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <label for="pass">Password:</label>
          </div>
          <div class="col after">
            <input type="password" name="pass" id="pass"/>
          </div>
        </div>
        <div class="row">
          <div class="col">
          </div>
          <div class="col">
            <input type="reset" class ="resetButton"/> 
            <input type="submit" value = "Login" class="submitButton"/>
          </div>
        </div>
      </div>
      
    </fieldset>
  </form>
</div>

＆＃13;

如何让这些文本输入框排成一行？

4 个答案: