html - 内联 block 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

我认为你用固定宽度打破了它，我在左侧和右侧文本上使用了 40% 的宽度，这似乎让所有内容都内联:

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