Question

我对HTML和CSS非常陌生。我试图将两个对象 - 我的标题图片和导航

放在一起

这是我的标题CSS

div #header-img {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        margin-top: -30px;
        padding: 0 0 0 0;
    }

这是我的标题html代码

<div id="header-img">
    <img src="http://metaphorcontrol.com/solewebsite/wp-content/uploads/2012/07/SoleHeaders1.jpg">
    </div>

我想知道如何将它与下面的html代码中的以下项目对齐。

<div>
        <nav><ul>
            <li style="background-color: #99042A;"><a href="/food-wine.html">Fine Foods</a></li>
            <li style="background-color: #585123;"><a href="/wine-cellar.html">Wine & Cellar</a></li>
            <li style="background-color: #2E0219;"><a href="/kitchenware.html">Kitchenware</a></li>
            <li style="background-color: #211103;"><a href="/our-philosophy.html">Our Philosophy</a></li>
            <li style="background-color: #DBCCC5;"><a href="/register.html">Register</a>|<a href="/login.html">Log-In</a></li>
        </ul></nav>
    </div>

使用以下CSS

    nav ul {
        list-style-type: none;
        overflow: visible;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        margin-top: -4px;
            }

        nav li {
            float: left;
            width: 204px;
            height: 80px;
            overflow: hidden; 
            white-space: nowrap;
            }

语法在哪里出错我将来应该记住什么以确保我想要的所有行为都是正确的。

提前致谢！

Answer 1

尝试添加位置：相对于两者

 div #header-img {
            position:relative;
            display: inline-block;
            margin-left: auto;
            margin-right: auto;
            margin-top: -30px;
            padding: 0 0 0 0;
        }

Answer 2

直接访问＃header-img div＆＃34;＆＃34;我猜你的目的是做这件事吗？

div#header-img { /* CSS HERE */ }

......不是

div #header-img { /* CSS HERE */ }

无论如何可能都有效，因为你的网站可能至少有一个div包围但是:)但差别是：

div＃header-img = ID为header-img的div

div＃header-img =一个div内有ID header-img的元素（实际上是div）......

你做出选择，简单！ :)

Answer 3

你可能想看看bootstrap ...它似乎很快成为基础设计的标准。

它具有响应式和预先设定的类。由引导程序提供的导航栏可以非常轻松地满足您的需求。

Here是什么是bootstrap和下载的基本大纲。

Here是完整的教程。

Answer 4

现在你的导航栏上有填充，而图像却没有。它推动它并使它不像图像那样排成左边。

setUsername

将填充添加到顶部，它们将对齐。您可以使用position：并创建一个具有设置宽度的外部div来包含元素，并且边距设置为auto，它们也应该在其中正确居中。

Answer 5

您必须在标题和导航中指定一个宽度，并指明标题img，display:block而不是内联块

   body{width:100%;}
#wrapper{width:1024px;
   margin-left: auto;
    margin-right: auto;}
   
nav ul {
    list-style-type: none;
    position:relative;
    display: inline-block;
    margin: 0!important;
    padding:0!important;
     
        }

    nav li {
        float:left;
      text-align:center;
        width: 204px;
        height: 80px;
        overflow: hidden; 
        white-space: nowrap;
        }

   #header-img {
   
 display:block;
    margin-top: -30px;
    padding: 0 0 0 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="wrapper">
  <div id="header-img">
<img src="http://metaphorcontrol.com/solewebsite/wp-content/uploads/2012/07/SoleHeaders1.jpg">
</div>
<div>
    <nav><ul>
        <li style="background-color: #99042A;"><a href="/food-wine.html">Fine Foods</a></li>
        <li style="background-color: #585123;"><a href="/wine-cellar.html">Wine & Cellar</a></li>
        <li style="background-color: #2E0219;"><a href="/kitchenware.html">Kitchenware</a></li>
        <li style="background-color: #211103;"><a href="/our-philosophy.html">Our Philosophy</a></li>
        <li style="background-color: #DBCCC5;"><a href="/register.html">Register</a>|<a href="/login.html">Log-In</a></li>
    </ul></nav>
</div>  
  </div>
</body>
</html>

如何让我的标题与我页面中心的导航栏对齐？

5 个答案: