html - Using a list in my div is increasing the lineheight

Question

In my header, I'm having an issue where if I put regular text in, the lineheight is fine, but if I use a list, I get a good amount of padding on the top and the bottom.

Below is all relevant HTML and CSS as well as a fiddle

<header class="clearfix">
        <div class="content-wrapper">
            <aside>
                <div class="nav">
                    My line-height isn't bad at all!
                </div>
            </aside>
        </div>
    </header>

<header class="clearfix">
        <div class="content-wrapper">
            <aside>
                <div class="nav">
                    <ul>
                        <li>My line-height is huge!</li>
                    </ul>

                </div>
            </aside>
        </div>
    </header>

CSS

header
{
    background-color: #eee;
}

.clearfix
{
    overflow: auto;
}

header #title-container
{
    font-size: .7em;
}

    header aside .nav
    {
        padding-right: 4px;
        float: right;
    }

        header aside .nav
        {
            background-color: red;
        }

Answer 1

添加style="display: inline; padding: 0;"到您的<ul>-tag 可以解决问题。您的 html 的第二部分将如下所示：

<header class="clearfix">
    <div class="content-wrapper">
        <aside>
            <div class="nav">
                <ul style="display: inline; padding: 0;">
                    <li>My line-height is huge!</li>
                </ul>

            </div>
        </aside>
    </div>
</header>

Answer 2

重置 ul 和 li 的边距和填充。

http://jsfiddle.net/PSeFe/3/

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
}