Question

我正在我的应用程序中创建标签链接，我正在努力让各个标签彼此很好地对齐（即没有重叠等）

这是我的标记

a.user-interest {
    border-radius: 5px;
    background: #f2f2f2;
    color: #696969;
    border: 3px solid #A9A9A9;
    padding: 3px;
    white-space: nowrap;
    text-decoration: none;
}

<html>
  <head>  
     <title>Example</title>
  </head>
  <body>
  <div>
    <h4>Interests</h4>
    <p class="interest">    
      <a class="user-interest" href="#">Science Fiction</a>    
      <a class="user-interest" href="#">Community Service</a>    
      <a class="user-interest" href="#">Craftsmanship</a>    
      <a class="user-interest" href="#">Exercising and Healthcare</a>    
    </p>
  </div>
  
  </body>
</html>

如何让标签很好地对齐？

Answer 1

将 display: inline-block 添加到您的 CSS，我还建议使用 margin 来完全查看分离（这取决于您）。

a.user-interest {
    border-radius: 5px;
    background: #f2f2f2;
    color: #696969;
    border: 3px solid #A9A9A9;
    padding: 3px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    margin: 2px;
}

<html>
  <head>  
     <title>Example</title>
  </head>
  <body>
  <div>
    <h4>Interests</h4>
    <p class="interest">    
      <a class="user-interest" href="#">Science Fiction</a>    
      <a class="user-interest" href="#">Community Service</a>    
      <a class="user-interest" href="#">Craftsmanship</a>    
      <a class="user-interest" href="#">Exercising and Healthcare</a>    
    </p>
  </div>
  
  </body>
</html>

如何防止标签相互重叠

1 个答案: