Question

我正在尝试为我的公司创建一个网站，但我遇到了徽标和p元素定位的问题。我希望它们显示在同一条线上，但它并不是我想要它的工作方式。这是我的HTML：

    <header class="mainHeader">
        <div class="imageholder"><a href="index.html"><img src="img/logo.png" alt="logo" title="Detect Fire and Security Worthing Logo"/></a></div>
        <div class="textholder"><h2 class="number" style="color: #FFF"><p>admin@detect-fs.co.uk</p><p>01903 659 245</p></h2></div>

        <nav>
            <ul>
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="intruder_alarms.html">Intruder Alarms</a></li>
                <li><a href="cctv.html">CCTV</a></li>
                <li><a href="fire_alarms.html">Fire Alarms</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About Us</a></li>
            </ul>
        </nav>
    </header>

和我的CSS：

.imageholder {
    position: relative;
    display: inline;
    width: 50%;
}

.textholder {
    text-align: right;
    display: inline;
    width: 50%;
    line-height: 20%;
    position: relative;
}

.mainHeader img {
    width: 30%;
    height: auto;
    margin: 2% 0 0 0;
    display: inline;
}

我认为，如果这两个div，imageholder和textholder的宽度为50％，它会起作用，但接下来发生的是标识的高度是50％，我不想要，但我可以＆＃39 ;之后似乎增加了高度。

Answer 1

试试这个

.textholder *{ 
    display: inline;
}

小提琴：https://jsfiddle.net/fj1hn19c/

Answer 2

看起来图像的高度是按其宽高比缩放的，所以当宽度增加时，高度也是如此。

要解决此问题，您可以使用max-height CSS样式，但根据图像的纵横比，它可以拉伸并像素化它。您还可以为图像设置max-width，以防止图像超出您想要的范围。

此外，如果您希望这些元素与块级元素对齐，那么我建议使用display: inline-block而不是display: inline

错位的图像将进一步帮助我们以与您相同的方式看待问题。

Answer 3

诺亚，如果没有更多信息，很难回答这个问题。我无法看到容器元素＆＃34; mainheader＆＃34;坐在里面，它的CSS是什么以及你的段落标记css是什么？

根据您提供的信息，我可以提出一些建议：

一种是将textholder.p CSS编码为零边距：

margin-top: 0; 
margin-bottom:0;

浏览器会自动在段落之前和之后添加一个空行，这可能是问题的一部分。

其次是检查CSS中的填充，边距，内联和浮动设置，以确定＆＃34; mainheader＆＃34;的父/容器元素。

为什么我的元素排列不正确

3 个答案: