html - 如何将文本和未排序列表放在同一行

Question

我试图让它们显示在同一行，但它们不是。文本向左浮动很好。但是向右浮动的列表效果不佳。我试着让它们在线显示，但仍然不好，它们几乎是在线的。以下为html代码:

    <header class="Header">
        <div class="mainHeader">
            <h1>Title</h1>
            <h3>Subtitle</h3>
        </div>

        <div class="subHeader">
            <ul>
                <li>Phone</li>
                <li><a href="#">Email</a></li>
                <li>Address</li>
            </ul>
        </div>
    </header>

以下为CSS代码:

.Header{
    background-color: #D5DBDB;
    height: 80px;           
    padding: 2% 0%;         
    margin: 2% auto;        
    border-radius: 5px;
}

.mainHeader h1{
    margin: 0 auto;
    color: #E67E22;
}

.mainHeader h3{
    text-align: left;
    float: left;
}

.subHeader{
    float: right;
    text-align: right;
}

.subHeader ul{
    list-style: none;
}

Answer 1

.subHeader ul li{
显示:内联；
}