html - 尝试更改 html 中按钮的对齐方式

Question

我正在尝试将我的一排按钮对齐到比现在略低的位置。但是，由于这是我第一次学习 html，所以我不确定如何去做。我可以将所有按钮对齐在一起，但我不能将按钮作为一个整体移动。

.button4 {
  display: inline-center;
  padding: 0.3em 1.0em;
  margin: 0 0.1em 0.4em 0;
  border: 0.15em solid rgba(255, 255, 255, 0);
  border-radius: 3em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
  text-align: center;
  transition: all 0.2s;
}

a.button4:hover {
  border-color: rgba(255, 255, 255, 1);
}

@media all and (max-width:30em) {
  a.button4 {
    display: block;
    margin: 0.2em auto;
  }
}

<div class="nav">
  <div class="container">
    <ul>
      <a href="index.html" class="button4" style="background-color:#4e9af1">Introduction</a>
      <a href="privacy.html" class="button4" style="background-color:#4e9af1">Privacy Policy & Cookies/Security</a>
      <a href="security.html" class="button4" style="background-color:#4e9af1">Device Optimisation & Navigation</a>
      <a href="relevant-tech.html" class="button4" style="background-color:#4e9af1">Relevant Technologies</a>
      <a href="test-page.html" class="button4" style="background-color:#4e9af1">Web technologies</a>
      <a href="bibliography.html" class="button4" style="background-color:#4e9af1">Bibliography</a>
    </ul>
  </div>
</div>

标签： htmlcss

Answer 1

您可以尝试flexbox得到广泛支持。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

调整页面大小，我认为这就是您要查找的内容。当然，你可以乱用最小宽度和高度，让它们看起来都一样。

要让一行上的所有按钮修改flex-flow: row wrap为flex-flow:row no-wrap

.container {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.button4 {
  background:#4e9af1;
  padding: 0.3em 1.0em;
  margin: 0 0.1em 0.4em 0;
  border: 0.15em solid rgba(255, 255, 255, 0);
  border-radius: 3em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: all 0.2s;
}

a.button4:hover {
  border-color: rgba(255, 255, 255, 1);
}

@media all and (max-width:30em) {
 .container {
  flex-flow: column;
 }

 button4 {
  width: 100%;
 }
}

<div class="nav">
  <div class="container">
     <a href="index.html" class="button4">Introduction</a>
     <a href="privacy.html" class="button4">Privacy Policy & Cookies/Security</a>
     <a href="security.html" class="button4">Device Optimisation & Navigation</a>
     <a href="relevant-tech.html" class="button4">Relevant Technologies</a>
     <a href="test-page.html" class="button4">Web technologies</a>
     <a href="bibliography.html" class="button4">Bibliography</a>
  </div>
</div>