0

很长一段时间以来，我都无法在输入框的右侧显示一个按钮。在某些计算机上它可以工作，但在其他计算机上以不同的分辨率它会隐藏在输入框下，因此用户甚至看不到它。

我的代码类似于（在 Rails 中使用 simple_form）：

<%= simple_form_for @review, :url => search_index_path, :method => :post, :html => {:class => 'form-inline'} do |f| %>

等等……等等……

在 Stackoverflow 的帮助下，我的 css 更改了很多次 - 花了几天的时间 - 最终变成了这样，效果很好：

.form-inline div { 
display: inline-block;
margin-top: 5px;
 }

我只是好奇那个'div'是什么意思？例如，

.form-inline { 
display: inline-block;
margin-top: 5px;
 }

不起作用。我认为 'div' 是您在标记代码中放入的内容，例如<div form-inline>whatever</div>，而不是在 css 中。只是好奇...

4

5 回答 5

2

.form-inline div选择器意味着将此规则应用于div任何具有 class 的任何元素的后代form-inline。

例如：

<my-elem class="form-inline">
   <another-type />
   <div>I'll get this CSS rule</div>
   <something-else>
     <div>I'll get this CSS rule too</div>
   </something-else>
</my-elem>

CSS 中的 HTML 元素名称没有前缀，例如类（带有 .dot）或 ID（带有 #hash）。

于 2013-06-30T22:51:00.413 回答
2

这 div意味着您的元素中的所有 div 元素都具有.form-inline类。他们不需要是.form-inline元素的孩子。他们只需要参与其中。

以此为例：

<form class="form-inline">
   <div>a</div>
   <div>b</div>
   <p>Some text <div>d</div></p>
</form>
<div>c</div>

divs “a”、“b”和“d”将被格式化。div“c”不会。

于 2013-06-30T22:47:16.900 回答
1

您可以使用很多 CSS 选择器。你可以在这里找到所有这些：

http://www.w3.org/TR/CSS2/selector.html

于 2013-06-30T22:50:01.130 回答
1

它将那组规则分配给元素内的任何 div而不是它本身。.form-inline.form-inline

于 2013-06-30T22:47:25.800 回答
1

代码中的 div 是 CSS 中选择器的一部分。

用简单的英语来说，这意味着选择任何具有 .form-inline 类的元素/标签，然后选择作为该元素的后代的所有 div 并应用以下规则。

display: inline-block;
margin-top: 5px;

在您的情况下，您使用的是后代选择器

后代选择器

两个简单选择器之间的空间称为组合。

选择器参考

于 2013-06-30T22:48:55.790 回答