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

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的“a”、“b”和“d”将被格式化。 div "c"不会。