html - 为什么我不能让按钮形成内联？

Question

我想要字符串旁边的 btn。即使使用 CSS 内联我也无法弄清楚

在此处输入图像描述

 <span class="subscribe_button"> <h3>Books</h3> <%= render 'follow_form' %></span>

CSS：

.subscribe_button {
display: inline;
}

score 6 · Accepted Answer

这里有一些无效的 HTML。

块级元素不能在内联元素中，这是基本的 HTML 知识。

我建议您将两个元素都包装在 a 中div并使用 float: left;

<div class="wrap">

<h3>Books</h3>
<span class="subscribe_button"> unsubscribe</span>

</div>

CSS：

.wrap
{
    width: 300px;
}

.wrap h3, 
.wrap span
{
    float: left;
}

.wrap span
{
    margin-left: 10px/*your value*/;
}

我还建议您阅读 HTML 规则，在哪里允许什么以及为什么允许或不允许。

score 1 · Accepted Answer

该Books部分（也）是一个块（由于<h1>），因此您需要将其设置inline为同样（如limelights的注释所示），否则您的按钮仍将被推到下一行。

score 1 · Accepted Answer

尝试将此添加到您的 CSS

.subscribe_button h3 {
    float: left;
}

如果您浮动一个元素，则意味着它之后的其他元素将与它换行到同一行（只要它们的宽度不会使它们太宽）。

score 0 · Accepted Answer

Span 是内联元素，h3 是块元素。内联元素应该在块元素内。您是否尝试过验证您的 html 代码？http://validator.w3.org/

尝试：显示：内联块；

score 0 · Accepted Answer

我认为您可以使用以下代码执行此操作：

.subscribe_button > * {
  display: inline;
}

'>' 是一个子选择器， * 匹配所有元素。

你可以阅读更多关于 CSS2 选择器的信息：CSS2 选择器

score 0 · Accepted Answer

0

试试下面的代码

.subscribe_button h3{
display: inline;
}

于 2013-01-18T10:27:40.850 回答

score 0 · Accepted Answer

0

用于float:left两者h3和button

于 2013-01-18T10:29:32.290 回答

7 回答 7