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

Question

我想要字符串旁边的btn。即使使用CSS inline

，我也无法弄明白

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

CSS：

.subscribe_button {
display: inline;
}

Answer 1

这里有一些无效的HTML。

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

我建议你做的是将两个元素包装在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规则，允许哪些内容以及为什么允许这些规则。

http://jsfiddle.net/Kyle_Sevenoaks/zJUZs/

Answer 2

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

Answer 3

尝试将此添加到您的CSS

.subscribe_button h3 {
    float: left;
}

如果你浮动一个元素，它意味着其它元素将被包裹到与它相同的行上（只要它们的宽度不会使它们太宽）。

Answer 4

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

尝试： display：inline-block;

Answer 5

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

.subscribe_button > * {
  display: inline;
}

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

Yo可以阅读有关CSS2选择器的更多信息：CSS2 Selectors

Answer 6

尝试以下代码

.subscribe_button h3{
display: inline;
}

Answer 7

对float:left和h3

使用button