如何更改链接列表位置？

Question

我正在设计我的网站的页脚并有以下问题： 如何更改我的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>

Answer 1

您可以使用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>

Answer 2

您必须将div内的#Questions代码的宽度设置为30%，将display代码设置为inline-flex

footer{
    background-color: #e0ebeb;
    list-style-type: none;
    display: inline;
}
ul{
    list-style: none;
}
div#Questions div{
    width: 30%;
    display: inline-flex;
}
#Questions {
   margin: auto;
   text-align: center;
   display: block;
   padding: 0;
}

这将并排设置div标签。评论中提到了html的变化。

<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>
   <div id="contact"> <!-- Add a new div tag -->
    <ul>
      <li><a href="#">Contact us</a></li>
    </ul>
   </div> <!-- Closing #contact -->

  <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>  <!-- Close #Questions here -->
 </div>  <!-- Close .secondpt here -->
 <hr>
 <div>
     <h1>Connect with us</h1>
 </div>
</footer>