為什么我的元素排列不正確

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％，這是我不希望的，但我似乎無法增加高度之后。

Answer 1

嘗試這個

.textholder *{ 
    display: inline;
}

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

Answer 2

圖像的高度似乎隨着其縱橫比成比例縮放，因此當寬度增加時，高度也是如此。

為了解決這個問題，您可以使用max-height CSS樣式，但是根據圖像的長寬比，它可以拉伸和像素化它。 您還可以為圖像設置max-width ，以防止圖像超出所需范圍。

另外，如果您希望這些元素像塊級元素一樣對齊，那么我建議使用display: inline-block而不是display: inline

未對准的圖像將進一步幫助我們以與您相同的方式查看問題。

Answer 3

諾亞，如果沒有更多信息，很難回答這個問題，例如，我看不到哪個容器元素“ mainheader”位於其中，它是什么CSS，以及您的段落標簽css是什么？

根據您提供的信息，我可以建議以下幾點：

一種是對您的textholder.p CSS進行編碼，使其具有零邊距：

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

瀏覽器會在段落的前后自動添加一個空行，這可能是問題的一部分。

其次是檢查CSS中的padding，margin，inline和float設置，以了解“ mainheader”的parent / container元素是什么。