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

最佳答案

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

09-25 17:13
查看更多