Question

我有一个div元素（.shop-bar），它是屏幕宽度的100％和固定位置。我想在里面有两个div;第一个（.search-bar）是父级和中心对齐（已完成）的50％，第二个（.cart）位于屏幕右侧（和父级）[问题]。

HTML：

 <div class="search">
  <div class="search-bar">
   <input type="text" id="searchbox" placeholder="Search"><button><i class="fa fa-search"></i></button>
  </div>

  <div class="cart">
   <i class="fa fa-shopping-cart"></i>
  </div>
 </div>

CSS：

.search {
  position: fixed;
  left: 0;
  right: 0;
  background-color: blue;
}

#searchbox {
  color: #f0a830;
  border: none;
  font-size: 28px;
  outline: none;
  background-color: #202020;
  border-radius: 5px 0 0 5px;
}

.search-bar input {
  width: 90%;
}

.search-bar button {
  background-color: #202020;
  border: none;
  font-size: 28px;
  outline: none;
  border-radius: 0 5px 5px 0;
  width: 10%;
}

.cart {
  display: inline-block;
  color: white;
  font-size: 32px;
}

我已尝试将.cart向右移动，但它会将.cart移动到下一行。我做了一个显示：内联块和所有变化。内联块可以将它移动到我想要的位置，但它实际上不在div中;更喜欢浮在上面。我怎样才能让它在父母的右边？

Answer 1

您可以在具有文本对齐中心的容器内使用显示内联块。

<div class="wrapper">
  <div class="rightalign">right content</div>
  <div class="centeralign">center content</div>
</div>

<style>
  .wrapper{ text-align:center; }
  .centeralign, .rightalign { width:200px;height:100px; }
  .centeralign{ display:inline-block;background:#ccf; }
  .rightalign{ float:right;background:#fcc; }
</style>

其他解决方案是创建多列布局。

一个div，中心对齐的div和右边的div

1 个答案: