Question

我想将快速搜索的div放在几个Q＆amp;但没有运气。 div是浮动左侧的背景图像。

HTML

<div class="l-row">
  <div class="QuickSearch">
    <div class="loop"></div>
    <form action=><div class="quickSearchInputName">xxx</div></form> 
  </div>
</div>

CSS

.QuickSearch {
  background: url(/templates/_system/main/images/job-search-bg.jpg) no-repeat top left;
  float:left;
  width:900px;
  height:170px;
  display:block;
  text-align:center;
  margin: 0px auto 0px auto;
}

.loop {
  /* background: url(quickSearch.png) no-repeat;*/
  width: 10px; height: 135px;
  display: block;
  float: left;
  margin: 0 0 0 2px;    
}

l-row {
  max-width:942px;
  width:100%;
  min-width:942px;
  text-align:center;
}

Answer 1

嗯，这里有一个固定大小的元素，所以我想你应该遵循经典：

.loop {
  width: 10px; height: 135px;
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -67px;
  /* taking into account that margin-right: 2px in the original ruleset */
  margin-left: -3px; 
}

检查this fiddle（必须稍微改变一下，使用纯色而不是背景图像）。

中心向左浮动以进行QuickSearch

1 个答案: