CSS drupal 搜索 api 浮动元素

Question

我刚刚实现了搜索 api 模块并且它可以工作。我用搜索 api 模块的块替换了核心搜索块。在 firefox 中，我看到搜索元素和文本字段（您可以在其中编写要搜索的单词）这两个元素之后的代码如下：

<div id="edit-search-api-views-fulltext-wrapper" class="views-exposed-widget views-widget-filter-search_api_views_fulltext">
<div class="views-widget">
<div class="form-item form-type-textfield form-item-search-api-views-fulltext">
<input id="edit-search-api-views-fulltext" class="form-text" type="text" maxlength="128" size="30" value="" name="search_api_views_fulltext">
</div>
</div>
</div>
<div class="views-exposed-widget views-submit-button">
<input id="edit-submit-searchadvanced" class="form-submit" type="submit" value="Zoeken" name="">
</div>

在我的 global.css 中，我设法在左侧站点设置了元素。既然他们在正确的地点，我希望他们并排站立，而不是彼此站在一起。我可以单独谈论这些元素，但是将它们并排放置是很困难的。我读过浮动，显示；内联，清晰，... 这是我的代码：

/*float right and textbox and searchbutton disapear at the right side, I gave also a width of 240 px  */
#views-exposed-form-searchadvanced-page{
 float:right;
 width: 500px; 
}
/*the element edit-search-api-views-fulltext, is the textfield and has a blue color  */
#edit-search-api-views-fulltext{
background:blue;
}
/*the element edit-submit-searchadvanced, is the searchbutton and has a green color  */
#edit-submit-searchadvanced{
background:green;

希望有人能帮我解决这个问题！

Answer 1

我不确定我是否正确理解了您的问题，但我认为您希望将搜索框和按钮并排显示。

为了实现包装器 div (#views-exposed-form-searchadvanced-page) 应该浮动到右侧（您已经这样做了），搜索框和按钮应该浮动到左侧。

/*the element edit-search-api-views-fulltext, is the textfield and has a blue color  */
#edit-search-api-views-fulltext {
  background: blue;
  float: left;
}
/*the element edit-submit-searchadvanced, is the searchbutton and has a green color  */
#edit-submit-searchadvanced {
  background: green;
  float: left;
}

有关完整的工作示例，请参阅 this fiddle。

CSS drupal 搜索 api 浮动元素

CSS drupal search api float elements

html

css

drupal