リスト要素内の要素を整列する

Question

私はnのリストを持っています。

子imgを持つ要素aを、兄弟の次にp要素のそばに配置しようとしています。

私はdisplay:inline-blockに両方の設定を試みましたが、変更はありません。

<li> 
    <h3>Header 3</h3> 
    <a href="#"><img src="example.img" alt=""></a> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
</li> 

私の目標はa要素の横にテキスト、およびその同じパネルの中央にh3と左にあるパネルのようなものを作成することです：私のコードは次のようになります。

<li> 
 
    <h3>Header 3</h3> 
 
    <a href="#"> 
 
    <img src="example.img" alt=""> 
 
    </a> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
 
</li>

Answer 1

私は何をあなたの質問の目標を理解していませんでした。しかし、私の答えは間違っていた場合、aとpで使用display:inline-block :)

li{ 
 
    list-style: none; 
 
} 
 
h3{ 
 
    text-align: center; 
 
} 
 
img{ 
 
    float: left; 
 
} 
 
p{ 
 
    text-align: right; 
 
}

<li> 
 
     <h3>Header 3</h3> 
 
     <a href="#"><img src="example.img" alt=""></a> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
 
</li>

Answer 2

を教えてくださいとh3

body, 
 
h3, 
 
p { 
 
    margin: 0; 
 
    font-size:16px /* restore font-size inline-block fix*/ 
 
} 
 
h3 {text-align: center} 
 
ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 0 
 
    /*inline-block fix gap*/ 
 
} 
 
li { 
 
    background: red; 
 
} 
 
a, 
 
li, 
 
p { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 50% 
 
} 
 
img { 
 
    width: 100%; 
 
    display: block 
 
}

<ul> 
 
    <li> 
 
    <h3>Header 3</h3> 
 
    <a href="#"> 
 
     <img src="//lorempixel.com/100/100" alt=""> 
 
    </a> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
 
    </li> 
 
    <li> 
 
    <h3>Header 3</h3> 
 
    <a href="#"> 
 
     <img src="//lorempixel.com/100/100" alt=""> 
 
    </a> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate interdum lacus in hendrerit. Donec libero metus, maximus sit amet.</p> 
 
    </li> 
 
</ul>

で text-align:centerを使用し、いくつかの widthを設定