如何更改链接列表位置？

debugcn 发表于 Dev

泰德·斯塔格斯

我正在设计我网站的页脚并有以下问题：如何更改我的 CSS 使其看起来像这样：

在此处输入图片说明

footer{
    background-color: #e0ebeb;
    list-style-type: none;
    display: inline;
    
  
}

#Questions {
   margin: auto;
   text-align: center;
   display: block;
   padding: 0;
}

 <footer>
   
       
    <div class="Newsletter">
      <h1>Get our Newsletter</h1>
      <h2>Stay tuned and new gadgets everday!</h2>
    </div>
   
    <div class="secondpt" >
     <div id="Questions">
      <h1>Do you have a question </h1>
        <ul>
          <li><a href="#">Contact us</a></li>
        </ul>
    
      </div>
      <div id="Menu">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Who are we ?</a></li>
           <li><a href="#">Newest</a></li>
           <li><a href="#">The Best</a></li>
        </ul>
      </div>
    
      <div id="languages">
        <ul>
           <li><a href="#">English</a></li>
           <li><a href="#">Deutsch</a></li>
           <li><a href="#">Français</a></li> 
        </ul>
      
       </div>
     </div>
     <hr>
     <div>
         <h1>Connect with us</h1>
     </div>
   
   </footer>

M0ns1f

您可以使用float属性来实现这一点：

*{
 font-size:15px;
}
ul {
list-style:none;
}
footer{
    background-color: #e0ebeb;
    list-style-type: none;
    display: inline; 
}


.secondpt {
    width: 100%;
}

div#Menu {
    float: left;
}

div#languages {
    float: right;
}

.right{
 float:right
}
.left{
 float:left
}

<footer>
    <div class="Newsletter">
      <h1>Get our Newsletter</h1>
      <h2>Stay tuned and new gadgets everday!</h2>
    </div>
   
    <div class="secondpt" >
    <div class="left">
     <div id="Questions">
      <h1>Do you have a question </h1>
        <ul>
          <li><a href="#">Contact us</a></li>
        </ul>
    
      </div>
     </div>
      <div class="right">
      <div id="Menu">
        <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">Who are we ?</a></li>
           <li><a href="#">Newest</a></li>
           <li><a href="#">The Best</a></li>
        </ul>
      </div>
    
      <div id="languages">
        <ul>
           <li><a href="#">English</a></li>
           <li><a href="#">Deutsch</a></li>
           <li><a href="#">Français</a></li> 
        </ul>
       </div>
       </div>
     </div>
     <hr>
   </footer>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。