br 不会换行

Question

HTML 中的 br 标签没有换行。我有一个 div，里面有两个 div。里面的div是左右浮动的。我使用 br 两次为它下面的提交按钮创建一个新行，并在它们之间创建一个可见的 space 但它不会让步。我也尝试为提交按钮制作一个 div，并尝试使用 CSS 对其进行编辑，但它仍然不起作用。

@CHARSET "ISO-8859-1";

.mainform
{
    width: 350px;
    position: absolute;
    left: 0;
    right: 0;
    background-color: gray;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-top: 30px;
}

.inputText1
{
    margin-left: 10px;
}

.inputText2
{
    margin-left: 12px;
}

.from
{
    margin-top: -20px;
}

.firstStop
{
    float:left;
    vertical-align: top;
}

.secondStop
{
    float: right;
    vertical-align: top;
}

<div class="mainform">
    <div class="header"><h2 align="center">Metro Rail Transit Fare</h2></div>
    <div class="from"><p align="center">(North Avenue Station)</p></div>
    <form method="POST" action="InformationPath">
        Passenger First Name: <input type="text" name="first" class="inputText1" />
        <br>
        Passenger Last Name: <input type="text" name="last" class="inputText2" />
    <br>
    <br>
    Destination:
    <br>
        <div class="stops">
            <div class="firstStop">
                Stop 1: <input type="radio" name="destination" value="1,Quezon Avenue"/> Quezon Avenue 
                <br>
                Stop 2: <input type="radio" name="destination" value="2,Cubao"/> Cubao 
                <br>
                Stop 3: <input type="radio" name="destination" value="3,Ortigas"/> Ortigas 
                <br>
                Stop 4: <input type="radio" name="destination" value="4,Boni Avenue"/> Boni Avenue 
                <br>
                Stop 5: <input type="radio" name="destination" value="5,Buendia"/>Buendia 
                <br>
                Stop 6: <input type="radio" name="destination" value="6,Magallanes"/> Magallanes
                <br>
            </div>
            <div class="secondStop">
                <input type="radio" name="destination" value="1,GMA Kamuning"/>GMA Kamuning
                <br>
                <input type="radio" name="destination" value="2,Santolan" /> Santolan
                <br>
                <input type="radio" name="destination" value="3,Shaw Boulevard"/>  Shaw Boulevard
                <br>
                <input type="radio" name="destination" value="4,Guadalupe"/>  Guadalupe
                <br>
                <input type="radio" name="destination" value="5,Ayala"/> Ayala
                <br>
                <input type="radio" name="destination" value="6,Taft Avenue"/> Taft Avenue
            </div>
        </div>
        <br>
        <br>
        <input class="button" type="submit" value="Submit"/>
    </form>
</div>

Answer 1

您应该使用 CSS 让按钮出现在文本表单下方，<br> 应该只用于向下移动文本行，而不是用于对齐或设置样式。

删除 <br> 标签并将其添加到您的 CSS:

input.clear {
    clear:both;
}

然后将“提交”按钮的行更改为：

<input class="button clear" type="submit" value="Submit"/>

Answer 2

您已经将 class 添加到您的按钮，为什么不在您的 css 中使用它？

.button {
   display: inline-block;
   margin-top: 20px;
}

Answer 3

问题在于您的 div 的布局 - 而不是输入。

.stops 应该固定，因为它的内容是浮动的，它应该有责任纠正页面流。页面流的浮动元素 "fall out" 很像 position:absolute 元素。

你应该试试：

.stops {
    overflow:hidden;
}

这将允许周围的 div 到 "push" 按钮到达它在页面流中应该出现的位置。

另请参阅：Complex Divs (float/clear) - Two main columns + smaller internal columns

br 不会换行

br won't make a new line

html

css

forms