时间戳

首页 > 解决方案 > 有没有更好的方法来分组这些

标签？

html - 有没有更好的方法来分组这些

标签？

问题描述

所以我正在尝试创建一个具有居中链接的菜单，但我不知道是否有更好的方法来做到这一点（就像我想知道是否有一种方法可以只用一个

标签）。任何帮助表示赞赏。

.menuBar {
  width: 100vw;
  height: 5vh;
  background-color: plum;
  display: flex;
}

.menuBar>* {
  border: 1px solid black;
  margin-right: 5%;
  text-align: center;
}
<div class="menuBar">
  <a href="index.html" title="Home">
    <img src="homeButton.png" alt="Home Button" id="homeButton" width="50" height="50">
  </a>
  <p>
    <a href="bubble.html" title="Bubble Sort">Bubble Sort</a>
  </p>
  <p>
    <a href="insertion.html" title="Insertion Sort">Insertion Sort</a>
  </p>
  <p>
    <a href="merge.html" title="Merge Sort">Merge Sort</a>
  </p>
  <p>
    <a href="quick.html" title="Quick Sort">Quick Sort</a>
  </p>
</div>

标签： htmlcss

解决方案

我不确定这是否是您正在寻找的确切内容，但下面的代码将很好地将菜单项与它们周围的空间以及 a 中最少必要数量的元素div以及更少的元素居中css：

<body>
    <div class="menuBar">
      <a href="index.html" title="Home">
        <img src="homeButton.png" alt="Home Button" id = "homeButton" width="50" height="50">
      </a>
      <a href="bubble.html" title="Bubble Sort">Bubble Sort</a>
      <a href="insertion.html" title="Insertion Sort">Insertion Sort</a>
      <a href="merge.html" title="Merge Sort">Merge Sort</a>
      <a href="quick.html" title="Quick Sort">Quick Sort</a>
    </div>
</body>

.menuBar{
 width: 100vw;
 height: 5vh;
 background-color: plum;
 display: flex;
 align-items: center;
 justify-content: space-around;
}

看看这里。我希望它有所帮助。

推荐阅读