如何更改鏈接列表的位置？

我設計我的網站的頁腳和有以下問題：我怎樣才能改變我的CSS，以便它看起來像這樣：如何更改鏈接列表的位置？

enter image description here

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>

來源

2017-10-14 Ted Staggs

歡迎來到Stack Overflow！預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

可以實現這使用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>

來源

2017-10-14 21:11:32 M0ns1f

你要的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>

來源

2017-10-14 21:46:21

謝謝你soo –

代碼的工作？ –

如何更改鏈接列表的位置？

回答

相關問題