行內塊div不水平對齊

Question

我有一個項目，我需要對齊某些元素。無論出於何種原因，它都不起作用。我的HTML：

<div class="heading"> 
    <h1>Exotic <strong>Travel</strong></h1> 
     <div class="left"> 
     <ul> 
      <li><a href="index.htm">homepage</a></li> 
      <br> 
      <li><a href="aboutus.htm">about us</a></li> 
      <br> 
      <li><a href="destination.htm">destinations</a></li> 
      <br> 
      <li><a href="booking.htm">book a ticket</a></li> 
      <br> 
      <li><a href="contact.htm">contact us</a></li> 
     </ul> 
     </div> 
    <div class="rightimg"> 
      <img src="banner.jpg" alt="Beachside Hotel" /> 
    </div> 
    <div class="righttext"> 
      <h2>The Perfect Destination</h2> 
    </div> 

</div> 

和CSS：

body { 
    background-image: url(sky.jpg); 
    font-family: "Verdana", sans serif; 
    } 

h1 { 
    font-family: "Calibri Light", sans serif; 
    color: gray; 
    } 

h2 { 
    background-color: green; 
    display: inline-block; 
    border: 0; 
    margin: 0; 
    text-align: center; 
    width: 750px; 
    } 

a { 
    color: white; 
    margin: 4px; 
    padding: 5px 0 5px 0; 
    text-decoration: none; 
    } 

.left{ 
    background-color: red; 
    display: inline-block; 
    float: left; 
    height: 200px; 
    width: 350px; 
    } 

.heading { 
    background-color: white; 
    margin: 0 auto; 
    overflow: auto; 
    width: 1000px; 
    } 


.righttext { 
    display: inline-block; 
    float: right; 
    height: 60px; 
    width: 750px; 
    } 

.rightimg { 
    display: inline-block; 
    float: right; 
    margin: 0; 
    padding: 0; 
    width: 750px; 
    } 

這應該是工作的基礎上，我看到網站上的其他類似的例子，但它沒有考慮。任何幫助在這裏將不勝感激。

Answer 1

這是因爲您的元素具有固定寬度，這意味着所有3個元素的合併寬度超過可用空間。嘗試使用百分比寬度進行自適應設計，或將其調整爲您想要支持的分辨率。

Answer 2

我覺得你與你的固定寬度打破它，我用40％的寬度在左邊和righttext而且似乎把一切都內聯：

.left{ 
background-color: red; 
display: inline-block; 
float: left; 
height: 200px; 
width: 40%; 
} 

.righttext { 
display: inline-block; 
float: right; 
height: 60px; 
width: 40%; 
} 

https://jsfiddle.net/bkyLojx4/

此外，作爲一個供參考BR標籤在ul中無效。而是使用css來處理列表的樣式。