如何调整页眉中的img和ul标记

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;
    }