如何调整标题中的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; 

    }