Html 一个具有中心对齐div和右定位div的div

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

HTML:

---

我尝试将.cart向右浮动，但它会将.cart移动到下一行。我已经做了一个显示：内联块和所有的变化。内联块可以将其移动到我想要的位置，但实际上它不在div中；更像是浮在上面。如何使其位于父对象的右侧？

您可以在文本居中对齐的容器中使用“显示内联块”

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

正确内容
中心内容
.wrapper{文本对齐：居中；}
.centeralign、.rightalign{宽度：200px；高度：100px；}
.centeralign{显示：内联块；背景：#ccf；}
.rightalign{float:right；background:#fcc；}

---

另一个解决方案是创建多列布局。

您的HTML中没有

.shop bar

元素。请担心@MichaelCoker。我在发布CSS后更改了html。不用担心。你明白了吗？如果没有，请更新您的html和css，使其匹配。但是，右对齐的内容会推动居中的搜索栏。有什么方法可以停止吗？

.centeralign{display:inline block；margin right:-100px；background:#ccf；}

.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;
}

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