Question

如何在页脚中将文本移到彼此旁边？我试图让3列彼此相邻，现在我只有一列，我不知道如何在它旁边找到另外两列。

购物和学习
的Mac

    <br><a href="footer.html">iPad</a>

    <br><a href="footer.html">iPhone</a>

    <br><a href="footer.html">Watch</a>

    <br><a href="footer.html">TV</a>

    <br><a href="footer.html">Music</a>

    <br><a href="footer.html">iTunes</a>

    <br><a href="footer.html">iPad</a>

    <br><a href="footer.html">Accessories</a>

    <br><a href="footer.html">Gift Cards</a>

Answer 1

首先，划分链接......

<div class="linklist">
<a href="footer.html">iPad</a><br>
<a href="footer.html">iPhone</a><br>
<a href="footer.html">Watch</a><br>
</div>

<div class="linklist">
<a href="footer.html">TV</a><br>
<a href="footer.html">Music</a><br>
<a href="footer.html">iTunes</a><br>
</div>

<div class="linklist">
<a href="footer.html">iPad</a><br>
<a href="footer.html">Accessories</a><br>
<a href="footer.html">Gift Cards</a><br>
</div>

然后风格！

.linklist {
    width: 33%;
    display: inline-block;
}

扩展css然而适合你，但这会使链接在三列之间分开。 :)

Answer 2

尝试column-count CSS属性。请查看以下示例

<ul style="-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;">
  <li><a href="footer.html">iPad</a>
  </li>
  <li><a href="footer.html">iPhone</a>
  </li>
  <li><a href="footer.html">Watch</a>
  </li>
  <li><a href="footer.html">TV</a>
  </li>
  <li><a href="footer.html">Music</a>
  </li>
  <li><a href="footer.html">iTunes</a>
  </li>
  <li><a href="footer.html">iPad</a>
  </li>
  <li><a href="footer.html">Accessories</a>
  </li>
  <li><a href="footer.html">Gift Cards</a>
  </li>
</ul>

Answer 3

添加几个div来划分内容并添加一些css以根据需要对齐

 <div class="col">      
       <a>content</a>       
       <a>content</a>      
       <a>content</a>    
    </div>    
    <div class="col">    
      <a>content</a>      
      <a>content</a>  
      <a>content</a>  
   </div>    
   <div class="col">  
      <a>content</a>
      <a>content</a>    
      <a>content</a>  
  </div>

现在设置CSS：

   .col{
        width: 33%;
        float: left;
    } 
   .col a{
         float: left;
         width: 100%;
         margin: 2px;
    }

我没有测试过，在我的手机上写字。希望能帮助到你！

Answer 4

<a href="footer.html" class = "col1">iPad</a>
    <a href="footer.html" class = "col2">iPhone</a>
    <a href="footer.html" class = "col3">Watch</a> <br/>
    <a href="footer.html" class = "col1">TV</a>
    <a href="footer.html" class = "col2">Music</a>
    <a href="footer.html" class = "col3">iTunes</a>

CSS样式： .col1

    {
                position: relative;
                float: left;
                margin-right: 50px;
            }
            .col2
            {
                float: left;
                margin-right: 50px;
            }
            .col3
            {
                float: left;
                margin-right: 50px;
            }

希望这有帮助。您可以在堆栈溢出和谷歌中找到大量答案。

试图在页脚中相互移动文本

4 个答案: