在 div 标签内添加 <br> 标签失败。

Question

I have this HTML code:

<div id="welcomename">
    <h1>Welcome! What's your name?</h1>
    <input type="text" class="form" name="name" placeholder="Your name here!" id="name"/>
    <input type="button" onclick="clicked();" value="I'm ready!"/>
</div>
<br>

这段代码完全可行，但由于某种原因，我需要将<br>放在div 'welcomename'中。然而，当我这样做时，它就无法正常工作。

其他代码：

<div id="hiddenDiv" style="display: none;">
    <h1 id="welcomehowareyou">How are you today, ?</h1>
    <form id="welcomehowareyou2" method="post">
        <select name="mood" onchange="popup(this.options.selectedIndex)">
            <option value="" disabled selected>How are you?</option>
            <option>I'm doing great, thanks!</option>
            <option>I'm fine, but could be better</option>
            <option>I feel absolutely terrible today.</option>
            <!--<input type="submit" value="Done!"/>-->
    </form>
    <p></p>
</div>

- JugglingBob

---

似乎不起作用。 - JugglingBob

Answer 1

你是在输入元素的结尾标签之前、div 结尾标签之后添加 "br" 吗？这是因为输入元素是一个内联元素。

- majorhavoc

---

当你在div标签的结尾处加入br标签时，由于它是一个内联元素，它会被放置在输入元素旁边。 - majorhavoc

只需添加一个空的div，然后放置br。 div是块级元素。 - majorhavoc

喜欢 <div><br></div> 吗？ - JugglingBob

我的网站上有10像素的填充，但对于表单却不起作用。 - JugglingBob

如果不行的话，我会发布那段代码来解决那个问题！ - Adriano Repetti

Answer 2

请在这里使用fiddle检查：http://jsfiddle.net/ghxce8dr/ 它目前运行良好。我为两个div添加了<p></p>标签。

<div id="welcomename">
    <h1>Welcome! What's your name?</h1>
    <input type="text" class="form" name="name" placeholder="Your name here!" id="name"/>
    <input type="button" onclick="clicked();" value="I'm ready!"/>
</div>
<p></p>
Text After First Break
<div id="hiddenDiv">
    <h1 id="welcomehowareyou">How are you today, ?</h1>
    <select name="mood" onchange="popup(this.options.selectedIndex)">
            <option value="" disabled selected>How are you?</option>
            <option>I'm doing great, thanks!</option>
            <option>I'm fine, but could be better</option>
        <option>I feel absolutely terrible today.</option></select>
            <!--<input type="submit" value="Done!"/>-->    
    <p></p>
        Text After Second Break
</div>

希望这能对您有所帮助。

- Nilesh Thakkar

---

<p></p> 似乎可以工作，但我有另一个 div 它不起作用 - 我会编辑我的评论并添加进去。 - JugglingBob

正如之前的评论中有人建议的那样，您可以放置空的 div，例如 <div></div>，然后在该 div 中放置您的 <br /> 或 <p></p>。 - Nilesh Thakkar

你能检查一下这个 fiddle - http://jsfiddle.net/ghxce8dr/ 吗？我认为它运行良好。 - Nilesh Thakkar

忽略我之前的评论。谢谢，那个代码片解决了我的问题！你能否把它写成答案，这样我就可以将其标记为解决方案了吗？ - JugglingBob