フッターの隣にテキストを移動しようとしています

Question

フッタ内でテキストを隣り合わせに移動するにはどうすればよいですか？私は3つの列をお互いに隣り合わせにしようとしていますが、今は1つの列しかないので、隣に2つの列を取得する方法はわかりません。

ショップとcolumn-count CSSプロパティを試してみてください
マック

<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

こちらをご覧ください。例えば、下のチェック

<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 2

まず、リンクを分割し...そして

<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; 
} 

しかし、あなたには合っていますが、リンクが3つの列に分割されます。 :)

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; 
      } 

が、これは助けを願っています。あなたは、スタックオーバーフローとGoogleの答えの多くを見つけることができます。