行内块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来处理列表的样式。