Question

我正在开发一个网站，其网址可以覆盖整个网页。在该标题中，我想要包含徽标和无序列表作为导航菜单。

我做过的最后一个网站，我在标题中有两个图像，所以我使用了一个类来集中它们。它看起来像这样

.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

这是一个实际的例子 Link

但我的清单并不适用于此。它将列表放在徽标下面的下一行。

这是一个正在进行的JSFiddle JSFiddle

有人能告诉我一个简单的方法来纠正这个问题。

Answer 1

使用div代替p

<div class="centeredImage">
    <img src="images/companylogo.png" alt="Company Logo" height="150">
    <ul>
        <li>Services</li>
        <li>About Us</li>
        <li>Galleries</li>
        <li>Contact</li>
    </ul>
</div>

FIDDLE

Answer 2

使用div代替p并制作list-style: none

.centeredImage ul li{
    list-style: none;
}

看看这个DEMO

Answer 3

首先，你不应该在内联类（ul）中包装块类型元素（如p），你可以删除它，因为它没有任何用处。

其次，为了实现目标，您可以使用display:inline-block属性，这样两个元素都显示在同一行，并且可以与text-align:center;对齐

请参阅 FIDDLE

HTML：

    <div id="header">
            <img src="images/companylogo.png" alt="Company Logo" height="150"/>
            <ul>
                <li>Services</li>
                <li>About Us</li>
                <li>Galleries</li>
                <li>Contact</li>
            </ul>
    </div>
    <div id="container" class="container_12">
        <p>TagLine</p>
        <br />
        <br />
        <div id="slideShow" class="grid_12">
            <p>Slideshow</p>
        </div>
        <!--End slideShow-->
        <div class="clear"></div>
        <br />
        <br />
        <div id="aboutUs" class="grid_4">
            <p>about us</p>
        </div>
        <div id="picture" class="grid_4">
            <p>Picture</p>
        </div>
        <div id="services" class="grid_4">
            <p>services</p>
        </div>
        <div class="clear"></div>
        <br />
        <br />
        <div id="stuff" class="grid_4">
            <p>stuff</p>
        </div>
        <div id="blog" class="grid_4">
            <p>blog</p>
        </div>
        <div id="form" class="grid_4">
            <p>form</p>
        </div>
        <div class="clear"></div>
    </div>
    <!--End container_12-->
    <br />
    <br />
    <div id="footer">Footer</div>

CSS：

#header {
    /*height:200px;*/
    background-color:rgb(87, 140, 43);
    width:100%;
}
#header {
    text-align:center;
    margin-top:0px;
    margin-bottom:0px;
    padding:0px;
    width:100%;
}
#header img, #header ul{
    display:inline-block;
}
#footer {
    height:100px;
    background-color:green;
    width:100%;
}
#slideShow {
    height:200px;
    background-color:green;
}
#aboutUs {
    background-color:green;
    height:165px;
}
#services {
    background-color:green;
    height:165px;
}
#picture {
    background-color:orange;
    height:165px;
}
#stuff {
    background-color:orange;
    height:165px;
}
#blog {
    background-color:green;
    height:165px;
}
#form {
    background-color:orange;
    height:165px;
}

如何将此标题菜单置于徽标旁边

3 个答案: