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

Question

我正在尝试为我的公司创建一个网站，但我遇到了 Logo 和 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%，它就可以工作，但随后发生的是 Logo 的高度为 50%，这是我不想要的，但我似乎做不到之后增加高度。

Answer 1

试试这个

.textholder *{ 
    display: inline;
}

fiddle :https://jsfiddle.net/fj1hn19c/