如何在标签中排列图像、H1 标签和跨度<li>？

Question

我使用960个网格。图像应该位于左侧，文本应该出现在图像的右侧。上面的文字是一个h1标签，下面的文字是一个较小的。

文本应与图像水平对齐。但是，我不知道该怎么做。

任何帮助都是感激的。

li {
	list-style:none;}
.about .grid_10 ul >li img{
	float: left;
	top: 50%;
	transform: translateY(-50%);
width: 50px;
	height:50px;}
.about .grid_10 ul >li h1{
	float: left;
	font-size: 36px;
	font-family: 'OpenSans';
	font-weight: 800;
	line-height: 1.1em;
	margin-left: 20px;
	top: 50%;
	transform: translateY(-50%);}
	
.about .grid_10 ul >li h1 span{
	float: left;
	font-size: 12px;
	font-family: 'OpenSans';
	margin-top:0;}

 <div class="grid_10">
 <ul>
    <li>
        <img src="http://placehold.it/150x150" alt="My_Logo"/>
    </li>
    <li> 
        <h1>aaaaa aaaaaaa
            <br>
            <span>
                aaaaa aaaaaa  aaaaaaa aaaaaaaa
            </span>
        </h1>
    </li>                    
</ul>
</div>

Answer 1

我改变了你的html布局，并添加了正确的css

   
.grid_10  img {
    display: inline-block;
    float: left;
}
.grid_10  .text-container{
    display: inline-block;
    height: 150px;
    line-height: 150px;
    float: left;
    margin-left: 10px;
}

<div class="grid_10">
    <h1>aaaaa aaaaaaa</h1>
    <img src="http://placehold.it/150x150" alt="My_Logo"/>
    <span class="text-container">
        aaaaa aaaaaa  aaaaaaa aaaaaaaa
    </span>
</div>

Answer 2

将display: flex; flex-direction:row;属性添加到ul标签。这使得ul中的元素显示在一行中。你可以在ul标签上使用align-items属性来调整水平对齐。

我也会移动<span>标签之外的<h1>标签更好的样式。

Answer 3

您可以在CSS中为<li>项添加float: left;，使文本显示在图像的右侧