css - 如何防止我的文本行中断？

Question

我正在尝试使用与此类似的一些代码来防止我的文本行分成两行。

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

使用此代码，它在“我们”和“开”之间中断。我希望全部在一条线上。

score 1 · Accepted Answer

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

（当然你可以改变的 display 属性div，但是如果你不需要块，一开始就不要使用块元素！）

score 1 · Accepted Answer

修复标记：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元素转换为元素的 CSS。span在实践中，对 inner 这样做就足够了div：

.home_widget_lc { display: inline; }

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

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

score 0 · Accepted Answer

利用 -

div {display:inline;}

或者 -

div.home_widget_lc {display:inline;}

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

在此处输入图像描述

score 0 · Accepted Answer

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

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

并且div是从下一行开始的块元素。覆盖块元素的此功能的替代方法可以display:inline与这些元素一起使用。

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

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

score 0 · Accepted Answer

默认情况下<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>

score 0 · Accepted Answer

0

你能改变HTML吗？

<h3>
 join us on sundays
</h3>

都在一条线上。

于 2013-06-15T14:23:46.123 回答

6 回答 6