Question

我有点困惑，我想在标题中添加img和ul标签，我这样说：

HTML

<div class="header">
   <div class="container">
    <ul>
     <li><a href="#"> Help </a></li>
     <li><a href="../about/about us.html"> About Us </a></li>
    </ul> 
    <div class="img01">
      <img src="images/vfp logo.png" alt="LOGO" height="127" width="177">
    </div><!-- .img01 -->
  </div><!-- .container -->
</div><!-- .header -->

CSS

.header{
    height: 135px;
    background-color: #CCC;
    border-bottom: 2px solid #000;
    position:relative;

}

    .header a{
    color:#000;
    font-size: 25px;
    font-weight:bold;
    text-decoration:none;
    float:right;
    padding: 14px 10px;
    position:relative; top:40; right:40;
    margin: 0px 30px 0px 0px;
}

.header li {
    display: inline;

}

.header img01{
    text-align:left;

}

问题是我调整了ul和li标签，它们对我的页面很好，但img无法移动..而且不知道我应该在哪里填充img的填充和边距？

Answer 1

现在的CSS无效。

我想你可能想要这个：

.header img{
    text-align:left;

}

或者，如果您尝试设置没有ID的特定img的样式：

.header img:nth-of-type(1){
    text-align:left;

}

但是，如果你的img标签有ID，你可以指定它：

.header #someID{
    text-align:left;
}

修改
根据您更新的评论，您尝试设置一个名为img01的类，如下所示：

.header .img01 { text-align:left; }

您还可以专门设置img的样式：

.header .img01>img { text-align:left; }

Answer 2

试试这个：

   .header{
        height: 135px;
        background-color: #CCC;
        border-bottom: 2px solid #000;
        position:relative;

    }

    .header > a{
        color:#000;
        font-size: 25px;
        font-weight:bold;
        text-decoration:none;
        float:right;
        padding: 14px 10px;
        position:relative; top:40; right:40;
        margin: 0px 30px 0px 0px;
    }

    .header > li {
        display: inline;
    }

    .header > ul {

    }

    .header > img{
        text-align:left;
        padding: 1em;
        margin: 1em;

    }

如何调整Header中的img和ul标签？

2 个答案: