Question

我用HTML和CSS编写了一个表单。当我应用display: inline-block属性时，即使我没有使用<br/>标记，部分文本也会转到下一行。我也尝试增加fieldset元素的宽度，但没有任何改变。

我的代码：

＆＃13;

fieldset {
  background: lightyellow;
  border: 10px solid yellow;
  margin-bottom: 10px;
  width: 720px;
}
label {
  width: 180px;
  display: inline-block;
  text-align: right;
  vertical-align: top;
}
#imp {
  width: auto;
}
.imp {
  text-align: center;
}
.imp {
  text-align: right;
  vertical-align: top;
}

＆＃13;

<body>
  <h1>Please Enter Your Details For Our Dating Website</h1>
  <fieldset>
    <legend>Your Face</legend>
    <label for="image">Your Image:</label>
    <input type="file" name="image" required id="image">
    <br>
    <label for="preview">Image Preview:</label>
    <img id="preview" id="preview">
    <br>
  </fieldset>

  <br>
  <fieldset>
    <legend>Your General Details</legend>
    <label for="name">Name:</label>
    <input type="text" placeholder="Your full name" name="name" id="name">
    <br>
    <label for="gender">Gender:</label>Male
    <input type="radio" name="gender" value="male" id="gender">Female
    <input type="radio" name="gender" name="female">
    <br>
    <label for="age">Age:</label>
    <input type="number" id="age">
    <br>
    <label for="dob">Date of birth:</label>
    <input type="date" id="dob">
    <br>
    <label for="color">Favorite color:</label>
    <input type="color" id="color">
    <br>
    <label for="country">Which country:</label>
    <select name="country" id="country">
      <option value=""></option>
      <option value="india">India</option>
      <option value="china">China</option>
      <option value="japan">Japan</option>
      <option value="koria">Koria</option>
      <option value="australia">Australia</option>
    </select>
    <br>
  </fieldset>

  <br>
  <fieldset>
    <legend>Your Indicators</legend>
    <label for="height">Height:</label><span class="imp"> Short</span>
    <input id="height " type="range" min="0" max="100" name="height"><span class="imp"> Tall<span><br>
    <label for = "salary">Salary: </label><span class = "imp"> Poor</span>
    <input id="salary " type="range" min="0" max="100" name="salary"><span class="imp"> Rich<span>
  </fieldset>
    		
  <br>
  <fieldset>
    <legend>Your Contact Information</legend>
    <label for = "email">Email: </label><input type = "email" name = "email"><br>
    <label for = "mobile">Mobile: </label><input type = "tel" name = "telephone"><br>
    <label for = id = "address">Address: <textarea name = "address" placeholder = "Input your address here."  width = "360px" height = "50px"></textarea><br>
    <label for = "contact" id = "imp">Method to contact you: </label>
    <input id = "contact" type = "checkbox" name = "e_chat" value = "email">Email
    <input id = "contact" type = "checkbox" name = "whatsapp" value = "whatsapp">Whatsapp
    <input id = "contact" type = "checkbox" name = "in_app" value = "in_app">In-app chat
  </fieldset>
  <br><br>
  <input type = "submit" value = "Submit"/>
 </body>

＆＃13;

Answer 1

您忘记关闭label文字中的textarea标记。

＆＃13;

fieldset {
  background: lightyellow;
  border: 10px solid yellow;
  margin-bottom: 10px;
  width: 720px;
}
label {
  width: 180px;
  display: inline-block;
  text-align: right;
  vertical-align: top;
}
#imp {
  width: auto;
}
.imp {
  text-align: center;
}
.imp {
  text-align: right;
  vertical-align: top;
}

＆＃13;

<body>
  <h1>Please Enter Your Details For Our Dating Website</h1>
  <fieldset>
    <legend>Your Face</legend>
    <label for="image">Your Image:</label>
    <input type="file" name="image" required id="image">
    <br>
    <label for="preview">Image Preview:</label>
    <img id="preview" id="preview">
    <br>
  </fieldset>

  <br>
  <fieldset>
    <legend>Your General Details</legend>
    <label for="name">Name:</label>
    <input type="text" placeholder="Your full name" name="name" id="name">
    <br>
    <label for="gender">Gender:</label>Male
    <input type="radio" name="gender" value="male" id="gender">Female
    <input type="radio" name="gender" name="female">
    <br>
    <label for="age">Age:</label>
    <input type="number" id="age">
    <br>
    <label for="dob">Date of birth:</label>
    <input type="date" id="dob">
    <br>
    <label for="color">Favorite color:</label>
    <input type="color" id="color">
    <br>
    <label for="country">Which country:</label>
    <select name="country" id="country">
      <option value=""></option>
      <option value="india">India</option>
      <option value="china">China</option>
      <option value="japan">Japan</option>
      <option value="koria">Koria</option>
      <option value="australia">Australia</option>
    </select>
    <br>
  </fieldset>

  <br>
  <fieldset>
    <legend>Your Indicators</legend>
    <label for="height">Height:</label><span class="imp"> Short</span>
    <input id="height " type="range" min="0" max="100" name="height"><span class="imp"> Tall<span><br>
    			<label for = "salary">Salary: </label><span class = "imp"> Poor</span>
    <input id="salary " type="range" min="0" max="100" name="salary"><span class="imp"> Rich<span>
  </fieldset>
    		
  <br>
  <fieldset>
    <legend>Your Contact Information</legend>
    <label for = "email">Email: </label><input type = "email" name = "email"><br>
    <label for = "mobile">Mobile: </label><input type = "tel" name = "telephone"><br>
    <label for ="address">Address:</label> <textarea name = "address" placeholder = "Input your address here."  width = "360px" height = "50px"></textarea><br>
    <label for = "contact" id = "imp">Method to contact you: </label>
    <input id = "contact" type = "checkbox" name = "e_chat" value = "email">Email
    <input id = "contact" type = "checkbox" name = "whatsapp" value = "whatsapp">Whatsapp
    <input id = "contact" type = "checkbox" name = "in_app" value = "in_app">In-app chat
  </fieldset>
  <br><br>
  <input type = "submit" value = "Submit">
</body>

＆＃13;

Answer 2

首先，请确保关闭以下标记。这似乎造成了一些问题。

从中改变：

<label id="address">

对此：

<label id="address"></label>

使用内联块属性

2 个答案: