Question

HTML里的CSS样式设置了类选择器样式为什么只有下面第一个div，起作用了？

如下图：
我在上面css里面设置了,.font类选择器{} 里面dispaly:inline转换为了字符级。然后下面每个<input>后面里面的div class=“font” 但是如下图，除了第一个没有换行后，后面的还是自动换行了。我tm就疑惑了，为什么第一个行后面的不行，但是字体和颜色也改变了的。

~~而且 我后面在CSS里面随便怎么设置选择器 HTML里面元素 里面id=“”还是class=“”都不联想是怎么会是呀？？

-省去前面代码
.font { display: inline; color: #0000FF; font-size: 13px;}</style>

<fieldset> <legend> 请输入订单信息: </legend> <label for="text1">订单编号：</label> <input type="text" id="text1" name="text" class=""><div class="font">   <<<请输入第一位非零的六位订单号</div> <p> <label for="text2">客户电话：</label> <input type="text" id="text2" name="text"><div class="font">   <<<请输入不能超过12个汉字的</div> <p> <label for="text3">身份证号：</label> <input type="text" id="text3" name="text"><div class="font">   <<<请输入不能超过12个汉字的</div> <p> <label for="text4">送货地址：</label> <input type="text" id="text4" name="text"><div class="font">dgdg</div> <p> <label for="text5">联系电话：</label> <input type="text" id="text5" name="text"> <p> <label for="text6">电子邮件：</label> <input type="text" id="text6" name="text"> <hr /> <div id="text7"> <input type="button" id="button1" name="button" value="提交">    <input type="reset" id="reset1" name="reset" value="重置"> </div></fieldset>





Answer 1

问题出在你错用了<p>！！！

<p>的作用并不是仅仅换行，它是一个区块来的，即使你只用了<p>，最终浏览器也会自动按<p>...</p>来处理的！因此：

<input type="text" id="text1" name="text" class=""><div class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入第一位非零的六位订单号</div>
<p>
<label for="text2">客户电话：</label>
<input type="text" id="text2" name="text"><div class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入不能超过12个汉字的</div>

就相当于

<input type="text" id="text1" name="text" class=""><div class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入第一位非零的六位订单号</div>
<p>
<label for="text2">客户电话：</label>
<input type="text" id="text2" name="text"><div class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入不能超过12个汉字的</div>
</p>  浏览器会自动添加这个！

但是，有一点很特殊的是，<p>...</p>里面是不能包含<div>...</div>的！它会自动跳到<p>的外面，所以实际上就变成：

<input type="text" id="text1" name="text" class=""><div class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入第一位非零的六位订单号</div>
<p>
<label for="text2">客户电话：</label>
<input type="text" id="text2" name="text">
</p>
<div class="font">&nbsp;&nbsp;&nbsp;&lt;&lt;&lt;请输入不能超过12个汉字的</div>

这样的话，这个div里面的内容就会自动换行了，这跟它是否inline是无关的，因为换行是由<p>造成的

而第一个div因为没有被包含到<p>里面，所以它不受影响，不会换行。

解决的办法很简单，只要把所有<p>换成<br>就行了！！！

总结：不要乱用<p>，用的时候要成对来用，一定要把它当作类似<div>的区块来用，但要注意<div>里面可以包含<p>，但<p>里面不能包含<div>！如果是仅仅需要换行，就用<br>吧！

追问

你回答的实在太好了，问题的原因分析，示例，以及解决办法都有。这类回答一般不是年轻人的回答方式，年轻人多没有这个回答能力。 谢谢了好哈，给你发了一个私信，希望以后有也可以请教你。