时间戳

首页 > 解决方案 > 如何按顺序排列不同字长的按钮，以使每一行的长度大致相同

html - 如何按顺序排列不同字长的按钮，以使每一行的长度大致相同

问题描述

我有 50 个不同长度的按钮，我希望所有线条的长度大致相同。当我使用 justify 功能时，这不起作用。也许这是因为每个按钮中的文本不同？

a:link {
  background-color: #F19B42;
  padding: 15px 16px;
  align: "center";
  text-decoration: none;
  display: inline-block;
  margin: 4px;
  margin-right: 0px;
  font-family: monospace;
  font-size: 15px;
  color: white text-align: justify;
}
<a class="a" href="./opdrachtclick.html">Golfen</a> <a class="ab" href="./opdrachtclick.html">Zeilen</a> <a class="ac" href="./opdrachtclick.html">Reizen</a> <a class="ad" href="./opdrachtclick.html">Curacao</a> <a class="ad" href="./opdrachtclick.html">Fotografie</a>
<a class="ae" href="./opdrachtclick.html">Snowboarden</a>
<a class="af" href="./opdrachtclick.html">Programmeren</a> <a class="ag" href="./opdrachtclick.html">Arduino/pi/dialog flow etc. 
    </a> <a class="d" href="./opdrachtclick.html">Innovaties</a> <a class="e" href="./opdrachtclick.html">Leren en inspireren</a> <a class="f" href="./opdrachtclick.html">Klussen / Doe het zelven</a>
<a class="b" href="./opdrachtclick.html">Nieuwe gadgets</a> <a class="ba" href="./opdrachtclick.html">Famillie</a> <a class="da" href="./opdrachtclick.html">ING</a> <a class="ea" href="./opdrachtclick.html">Non-alcohol</a>

示例它的外观

标签： htmlcss

解决方案

将text-align: justify证明标签内的文本。由于您将其应用于按钮本身，因此您正在证明按钮中的文本。您需要将 应用于text-align: justify包装器。例如，在按钮周围添加一个 div。您还需要添加text-align-last: justify，因为text-align: justify不会证明最后一行。请参阅下面的片段。

div {
  text-align: justify;
  text-align-last: justify;
}

a:link {
  background-color: #F19B42;
  padding: 15px 16px;
  align: "center";
  text-decoration: none;
  display: inline-block;
  margin: 4px;
  margin-right: 0px;
  font-family: monospace;
  font-size: 15px;
  color: white
}
<div>
  <a href="#">Golfen</a>
  <a href="#">Zeilen</a>
  <a href="#">Reizen</a>
  <a href="#">Curacao</a>
  <a href="#">Fotografie</a>
  <a href="#">Snowboarden</a>
  <a href="#">Programmeren</a>
  <a href="#">Arduino/pi/dialog flow etc.</a>
  <a href="#">Innovaties</a>
  <a href="#">Leren en inspireren</a>
  <a href="#">Klussen / Doe het zelven</a>
  <a href="#">Nieuwe gadgets</a>
  <a href="#">Famillie</a>
  <a href="#">ING</a>
  <a href="#">Non-alcohol</a>
</div>

推荐阅读