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/

另外，因为fyi br标签在ul中无效。而是使用css来处理列表的样式。

Answer 2

这是因为你有固定宽度的元素，这意味着所有3个元素的组合宽度大于可用空间。尝试使用百分位宽度进行自适应设计或将其调整为您想要支持的分辨率。

内联块div不水平对齐

2 个答案: