Question

我是CSS的新手，但到目前为止还很喜欢它。但是，我用我的代码遇到了障碍。我几乎在那里，但需要一些适当的指导。

我提供了我的网站，我试图将我的徽标放在导航栏的左侧。我希望站点内容为CENTERED，宽度为960px，顶部为0px（与浏览器顶部对齐）。我正在使用带有display: inline选择器的CSS li来尝试实现我的目标。

我正在努力让内联导航器正对着徽标。我还试图用导航上的CSS a:hover选择器模仿徽标的顶部4px边框。我希望它位于浏览器中的margin-top: 0px。

这是我几乎正确的徽标/导航布局的链接：

http://multimediaxchange.com/vls/index.php?page=home

这是我的CSS代码：

.topbar {
    width:960px;
    height:87px;
    text-align:center;
}

.topbar-inner {
    width:960px;
    margin:0 auto 0 auto;
    text-align:center;
}

.logo {
    margin-top:0px;
    display:inline;
}

img {
    float:left;
    border: 0;
    padding: 0;
    margin: 0;
}

.menu {
    display:inline;
    margin-top:0px;
}

.menu > ul > li {
    display:inline-block;
    position:relative;
    border-top:4px solid #FFF;
    margin-right:0px;
    padding-top:40px;
    min-width:80px;
}

.menu > li {
    display:inline-block;
    list-style:none;
    margin-top:50px;
}

.menu li a {
    color: #000;
    display: block;
    text-decoration:none;
}

.menu li:hover {
    border-top-color: #039;
}

.menu li:hover a {
    color:#039;
}

body { 
    font-family:Arial, Helvetica, sans-serif; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px;
}

.content { 
    height:500px; 
    padding:0px 20px 20px 20px; 
    text-align:left; 
    font-size:12px; 
}

.footer { 
    border-top:1px solid #DFDFDF; 
    width:960px; 
    margin: 0 auto; 
    font-size:11px; 
    text-align:center; 
}

以下是HTML代码：

<?php
// Load Setup document:
include('_config/setup.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title><?php echo $page_title; ?></title>
    <link rel="stylesheet" type="text/css" href="_css/styles.css">
</head>
<body>
    <div class="topbar">
        <div class="topbar-inner">
            <div class="logo"><img src="/vls/_images/mylogo.png" height="87" width="287"/></div>
            <!-- logo -->
            <div class="menu"><?php include('_template/nav_main.php'); ?></div>
            <!-- menu -->
        </div>
        <!-- topbar-inner -->
    </div>
    <!-- topbar -->
    <div class="bdy_hdr"><?php get_page_name($dbc, $pg); ?></div>                    
    <div class="content"><?php get_page_body($dbc, $pg); ?></div>
    <div class="footer"><?php include('_template/footer.php'); ?></div>
</body>
</html>

谢谢！

Answer 1

一切都是正确的，但你需要添加这个属性margin：0 auto;不是topbar-inner类而是topbar类，就像这样。所以改变目前

.topbar {
    width:960px;
    height:87px;
text-align:center;
}

到

.topbar {
    width:960px;
    height:87px;
text-align:center;
margin:0 auto;
}

enter image description here

Answer 2

秘密在.topbar级。移除text-align:center，然后添加margin:0 auto。应该是这样的：

.topbar {
    width:960px;
    height:87px;
    margin:0 auto;
}

text-align:center阻止<ul>在图像浮动后在剩余空间中居中，因此顶部边框看起来无缝。

margin:0 auto整个kaboodle中心。

添加以下行：

.menu ul {
    margin:0;
}

它将位于浏览器的顶部。我对很多额外垃圾的评论仍然适用：）

编辑

这是您的页面，我正在谈论的是“极简主义”标记和样式。初学者可能不知道有一两个小技巧，但你应该很容易理解一切。

基本上，只需切掉所有废话额外的div，你就可以更快地追逐问题，更容易找到目标元素，拥有更轻的页面（以字节为单位），并且通常会为您的解决方案增添一些优雅。

这次重建完成了原作所做的一切，只占空间的一半。

HTML：

<body>
    <div class="topbar">
        <img src="logo.png" height="87" width="287"/>
        <ul class='menu'>
            <!-- Not great practice to stagger </li> like this,
                 but a good way to avoid rogue padding. -->
            <li><a href="index.php?page=home">Home</a>
            </li><li><a href="index.php?page=staffing">Staffing</a>
            </li><li><a href="index.php?page=jobs">Jobs</a>
            </li><li><a href="index.php?page=training">Training</a>
            </li><li><a href="index.php?page=gsa">GSA</a>
            </li><li><a href="index.php?page=why_us">Why Us</a>
            </li><li><a href="index.php?page=clients">Clients</a>
            </li><li><a href="index.php?page=contact">Contact</a></li>
        </ul>
    </div>
    ...the rest of your page...
</body>

CSS：

body {
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
}

.topbar {
    width:960px;
    height:87px;
    margin:0 auto;
}

.topbar img {
    float:left;
    border: 0;
}

ul.menu {
    margin:0 0 0 287px;
    padding:0;
}

ul.menu li {
    display:inline-block;
    position:relative;
    border-top:4px solid #FFF;
    list-style:none;
    padding-top:40px;
    min-width:80px;
}

ul.menu li a {
    color: #000;
    display: block;
    text-decoration:none;
}

ul.menu li:hover {
    border-top-color: #039;
}

ul.menu li:hover a {
    color:#039;
}

Answer 3

将divs置于容器中是一种很好的做法，如下所示：

<div id="container">
    <div class="topbar">
        <div class="topbar-inner">
            <div class="logo">
                <img src="/vls/_images/mylogo.png" height="87" width="287"/>
            </div>
            <div class="menu">
                <?php include('_template/nav_main.php'); ?>
            </div>
        </div>
    </div>
    <div class="bdy_hdr">
        <?php get_page_name($dbc, $pg); ?>
    </div>                    
    <div class="content">
        <?php get_page_body($dbc, $pg); ?>
    </div>
    <div class="footer">
        <?php include('_template/footer.php'); ?>
    </div>
 </div>

然后在CSS中执行此操作：

.topbar{
margin:0 auto;
}

我建议你width给.bdy_hdr，.content和.footer，然后对它们做同样的事，即：

.bdy_hdr,
.content,
.footer{
width:960px;
margin:0 auto;
}

我的徽标和内联块导航无法排队的CSS编码问题

3 个答案: