如何将多个按钮放在右上角并排居中

Question

我是编程新手。我正在尝试将顶部的多个按钮对齐到页面的中心，我尝试了 text-align 和 margin: 0; none 其中有效。现在，我已将按钮居中，但按钮彼此下方。有什么办法解决这个问题吗？我究竟如何居中呢？我正在使用烧瓶。

CSS:

#navBar {
    border: 2px solid black;
    margin: auto;
    height: 30px;
    width: 43%;
    padding: 5px;
}

#searchInput {
    position: absolute;
    top: 20px;
    right: 0;
    height: 35px;
    width: 185px;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    outline: none;
}

/*The buttons that I want centered*/
#dealsButton, #burgersButton, #drinksButton, #sidesButton, #dessertsButton{
    border: none;
    outline: none;
    background-color: transparent;
    color: #606060;
    top: 30px;
    font-size: 27px;
    font-family: 'Roboto', sans-serif;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
}

这是图片。边框与中心对齐，并且应该包含彼此相邻的按钮作为导航栏。我希望每个按钮也居中。我希望所有按钮都在同一位置居中，然后我将每个按钮分别向左和向右移动。但是，如果您知道如何将它们并排居中，请告诉我。

Answer 1

您的 CSS 代码存在一些问题，妨碍您实现目标：

每个按钮在左右两侧都有很大的边距，这使得没有足够的项目可以放在一行中
当您将每个按钮的大小设置为百分比时，它指的是父元素。如果您有超过 2 个宽度为 40% 的按钮，它们将溢出行到下一个。
关于如何同时设置多个元素的样式：现在，您根据每个按钮的 id 设置样式，这是唯一的。但是 classes 可以同时应用于多个元素，为它们提供相同的样式。因此，我不是通过 id（使用 #）设置样式，而是基于 .btn 设置样式，它告诉 CSS 使用 class（用点表示）设置所有样式，这称为 btn

我还在父元素上设置了 display: flex、align-items: center 和 justify-content: center，告诉它在水平和垂直方向上将所有项目对齐。

所以，这是一个演示：

#navBar {
  border: 2px solid black;
  margin: auto;
  height: 30px;
  min-width: 43%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#searchInput {
  position: absolute;
  top: 20px;
  right: 0;
  height: 35px;
  width: 185px;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  outline: none;
}


/* The buttons that I want to be centered */

.btn {
  border: none;
  outline: none;
  background-color: transparent;
  color: #606060;
  font-size: 27px;
  font-family: 'Roboto', sans-serif;
  /* used to show a line seperator */
  padding: 0 0.5em;
  border-right: 2px solid black;
}


/* Remove border for last item */

.btn:last-of-type {
  border-right: none;
}

<nav id="navBar">
  <a class="btn">Deals</a>
  <a class="btn">Burgers</a>
  <a class="btn">Drinks</a>
  <a class="btn">Sides</a>
  <a class="btn">Desserts</a>
</nav>

如何将多个按钮放在右上角并排居中

How to center multiple buttons on top right next to other

html

css

centering