使用内联块属性时，文本转到下一行
[英]The text goes to the next line when using inline block property
问题描述
I have written a form in HTML and CSS. 
我已经用HTML和CSS编写了表单。 When i apply the display: inline-block property, some of the text goes to the next line, even though I am not using the <br/> tag. 当我应用display: inline-block属性时，即使我没有使用<br/>标记，某些文本也会转到下一行。 I also tried increasing the width of the fieldset element, but nothing changed. 我也尝试增加fieldset元素的宽度，但没有任何改变。
My code : 我的代码 ：
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> <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>
2 个解决方案
解决方案1
2 2016-06-28 05:27:09
Your have forgotten to close the label tag in your textarea text. 您忘记了关闭textarea文本中的label标签。
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> <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>
解决方案2
1 2016-06-28 05:25:30
First thing, make sure you close the following tag. 首先，请确保关闭以下标签。 That seems to be causing some problems. 这似乎引起了一些问题。
Change it from this: 从此更改：
<label id="address">
To this: 对此：
<label id="address"></label>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用flex属性使文本停止在每个空格的下一行？ - How can I stop text to goes on next line on every space using flex property?
:: before，:: after选择器在使用position：absolute时转到下一行。 - ::before, ::after selector goes to the next line when using position:absolute;
如何使用内联块属性将文本放置在背景图像下方 - how to place text below background image using inline block property
将内联块元素清除到下一行 - Clearing an inline-block element to the next line
在图像旁边保留行内块文本 - Keep inline-block text next to image
如果文本溢出=转到下一行 - If text over flow = It goes to next line
使用内联块时垂直对齐文本 - Vertically align text when using inline-block
SVG img 内嵌多行文本“块” - SVG img inline with a multi line text "block"
在内联元素中的下一行显示文本 - Show text on next line within the inline elements
使用 inline-block 全高的 Img 加上多行文本在一行中？ - Img in full height plus multi line text together in one line using inline-block?
相关标签