Question

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

我的代码就像（在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。好奇......

Answer 1

此 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>

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

Answer 2

.form-inline div选择器意味着将此规则应用于每个div，它是任何具有类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）。

Answer 3

它将这组规则分配给 {/ 1}}元素内的任何div，而不是.form-inline本身。

Answer 4

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

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

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

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

Descendant Selector

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

Selector Reference

Answer 5

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

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

我的css代码中的'div'是什么意思？

5 个答案: