br不会换新行

HTML中的br标记不会换行。我有一个div里面有两个div。里面的div是左右浮动的。我使用br两次为它下面的提交按钮创建一个新行，并在它们之间创建一个可见空间，但它不会让步。我也尝试为提交按钮做一个div，并尝试使用CSS来编辑它，但它仍然无法正常工作。br不会换新行

@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>

来源

2015-01-15 Jessie

一切'

尝试''所以它会在你的浮动div之下被推倒。 – 2015-01-15 15:29:21

你可以很容易地使用CSS来实现这一点。 BR标签仅用于文本，如打破一条线以开始新的段落，而不是推送html元素。使用适当的编码方法。 – IndieRok 2015-01-15 15:29:43

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

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

来源

2015-01-15 15:33:08 IndieRok

那对我来说太蠢了。哈哈哈。谢谢！ – Jessie 2015-01-15 15:35:32

你仍然应该删除公平的换行符 – Lee 2015-01-15 16:03:23

您应该使用CSS来获取按钮，出现下面的文本形式，<br>应只用于向下移动文本行，不对齐或造型。

取出<br>标签和添加到您的CSS：

input.clear { 
    clear:both; 
}

那么你的提交按钮的行改成这样：

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

来源

2015-01-15 15:32:12 Lee

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

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

你应该尝试：

.stops { 
    overflow:hidden; 
}

这将使周边div来“推”的按钮，它应该是在页面流在哪里。

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

来源

2015-01-15 15:58:39 OharaSi

回答

相关问题