Question

我想在页面的左侧和右侧添加两个表单然后我写的东西应该显示在它们下面。但问题是它是在两种形式之间显示的。

<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space       between the two forms</p>

CSS

.login{
float:left;
}

.signup{
 float:right;
}

Answer 1

非常不鼓励使用浮动元素，因为还有许多其他更好的选择可以替代使用。最好的选择是

display：inline-block;

CSS

.login{
display:inline-block;
}

.signup{
 display:inline-block;
}

Flexbox

如果您仍想使用浮动元素，可以使用clearfix。 Clearfix是元素自动清除其子元素的一种方式。有关详细信息，请参阅How to use clearfix

Answer 2

提及宽度属性width:50%;它将起作用

＆＃13;

.login{
float:left;
width:50%;  
}

.signup{
 float:right;
  width:50%; 
}

＆＃13;

<form class="login">.....</form>
<form class="signup">.....</form>
<p>This content should be displayed below but it is displayed in space       between the two forms</p>

＆＃13;

Answer 3

在段落中添加样式clear:both会有所帮助。

.clear
{
  clear:both;
}

<p class="clear">This content should be displayed below but it is displayed in space between the two forms</p>

我应该使用浮动以外的任何东西吗？

3 个答案: