如何保持我的文本不被破坏？

Question

我正在尝试使用与此类似的代码来保持我的文本行不会破坏。

<h3>
 <div class="home_widget">
  <div class="home_widget_lc">join us</div>
   on sundays</div>
</h3>

使用此代码，它在“我们”和“开启”之间断开。我想要一行。

Answer 1

答案是将“home_widget_lc”div更改为span。

（当然你可以改变div的显示属性，但是如果你不需要块，那么首先不要使用块元素！）

Answer 2

修复标记：不允许h3拥有像div这样的块级孩子。请改用span：

<h3>
 <span class="home_widget">
  <span class="home_widget_lc">join us</span>
   on sundays</span>
</h3>

或者，除非您有理由将h3的内容包装在容器中，否则将该类分配给h3元素（这可能意味着CSS代码也需要简化） ：

<h3 class="home_widget">
  <span class="home_widget_lc">join us</span>
   on sundays
</h3>

如果您无法更改标记，您需要希望它能够合理地工作，尽管无效并且添加或多或少尝试将div元素转换为span元素的CSS，造型感。在实践中，对内部div：

执行此操作就足够了

.home_widget_lc { display: inline; }  

根据类名home_widget_lc是否在别处用于其他目的，您可能需要编写更具体的选择器以防止该规则对其他元素产生不良影响，例如

h3 div.home_widget div.home_widget_lc { display: inline; }  

Answer 3

使用 -

div {display:inline;}

或 -

div.home_widget_lc {display:inline;}

小提琴 - http://jsfiddle.net/Sa9W4/

您还可以查看此内容以获得更多说明 - http://quirksmode.org/css/css2/display.html

Answer 4

这是因为您使用了单独的div来加入加入我们

<div class="home_widget_lc">join us</div>

和div是从下一行开始的块元素。替代覆盖块元素的这一特性，您可以将display:inline与这些元素一起使用。

如果您不需要为加入我们的特殊课程，您可以这样做

<div class="home_widget_lc">join us on sundays</div>

Answer 5

默认情况下，<div>代码设置为display: block。

更改CSS：

.home_widget, .home_widget_lc {
  display: inline;
}

或更改HTML：

<h3>
 <span class="home_widget">
  <span class="home_widget_lc">join us</span>
     on sundays
  </span>
</h3>

Answer 6

你可以改变HTML吗？

<h3>
 join us on sundays
</h3>

全部在一行。