0
我已经使用HTML和CSS编写了一个表单。当我应用display: inline-block属性时，某些文本会转到下一行，即使我没有使用<br/>标记。我也尝试增加fieldset元素的宽度，但没有改变。使用内联块属性时，文本进入下一行
我的代码：
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;
}<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>
\t \t
<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>
哪个文本你是指在给定的代码？ – AmanSinghal
地址标签后面的textarea元素转到下一行。 –
删除显示：inline-block;从标签，它将工作 – AmanSinghal