Question

在同一行显示两个图像和一个h1标记时出现问题。我想将一个图像对齐左边，最后两个元素对齐右边。关于如何做到这一点的任何提示？

HTML

<div class="header">
<img src="meny_knapp2.png" class="meny" alt="meny link">
<img class="hioa" src="logo_hvit.png" alt="HiOA logo">
<h1 class="lsb"> Læringssenteret </h1>            
</div>

CSS

.header {
height:120px;
width:100%;
background-color:#ff7f1f;
color:white;
font-size:20px;
display: table;
vertical-align:middle;
}

.meny {
height: 25px;
margin-left:0.5em;
line-height:120px;
}

.lsb {
font-size:24px;
letter-spacing:0.09em;
font-weight:lighter;
display:inline;
}

.hioa {
height: 60px;
float:right;
margin-right:1em;
}

Answer 1

.header * {
    float: right;

}

.header img:first-child {
     float: left;

}

.hioa {
    height: 60px;
    margin-right:1em;

}

Answer 2

请在课堂上调整css

   <div class="header">
    <div style="float:left;width:30%">
        <img src="meny_knapp2.png" class="meny" alt="meny link" width="50"/>
    </div>
    <div style="float:right;width:70%">
         <img class="hioa" src="logo_hvit.png" alt="HiOA logo" style="float:left;width:100px"/>
         <h1 class="lsb" style="float:left;width:50%"> Læringssenteret </h1>            
    </div>
    </div>

图像和h1标签显示在同一行CSS上

2 个答案: