Question

HTML中的br标记不会换行。我有一个div里面有两个div。里面的div是左右浮动的。我使用br两次为它下面的提交按钮创建一个新行，并在它们之间创建一个可见空间，但它不会让步。我也尝试为提交按钮创建一个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

您已经在按钮中添加了一个类，为什么不在您的CSS中使用它？

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

Answer 3

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

应该修复

.stops，因为它的内容是浮动的，它应该有责任纠正页面流。浮动元素与页面流“不同”，就像position:absolute元素一样。

你应该尝试：

.stops {
    overflow:hidden;
}

这将允许周围的div将按钮“推”到页面流中的位置。

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

br不会成新线

3 个答案: