57

私は何時間もの間、さまざまな方法を検索して試してきました。これら 2 つの画像とテキストをすべて 1 行に収めることができないようです。両方の画像と両方のテキストをすべて 1 行に配置して、画像、テキスト、画像、テキストを配置したい 私の画像は、シンプルなスタイルが添付されたこのようにコード化されています

 <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
 <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

私の「liketext」クラスには、単純なテキスト色修飾子があります。このコードでは、最初の画像とテキストは同じ行にあり、次の画像とテキストはその下の行にあります。4 つのオブジェクトをすべて同じ線上に配置したいと考えています。私は本当にこの質問を自分で解決しようとしましたが、与えられた助けに感謝します.この投稿が他の人にも役立つことを願っています.

4

9 に答える 9

58

どちらかを使用できます（h4要素では、デフォルトでブロックされているため）

display: inline-block;

または、要素を左/右にフロートさせることができます

float: left;

後でフロートをクリアすることを忘れないでください

clear: left;

@VSB が以下で共有する float left/right オプションのより視覚的な例:

<h4> 
    <div style="float:left;">Left Text</div>
    <div style="float:right;">Right Text</div>
    <div style="clear: left;"/>
</h4>

于 2012-11-28T02:35:59.663 に答える
22

設定することで、画像とテキストを親タグの中央に配置できます

div {
     text-align: center;
}

img とスパンを垂直方向に中央揃え

img {
     vertical-align:middle;
}
span {
     vertical-align:middle;
}

以下に 2 番目のセットを追加するだけです。1 つのことは、h4 にはブロック表示属性があるため、設定することをお勧めします。

h4 {
    display: inline-block
}

h4を「インライン」に設定します。

完全な例をここに示します。

<div id="photo" style="text-align: center">
  <img style="vertical-align:middle" src="https://via.placeholder.com/22x22" alt="">
  <span style="vertical-align:middle">Take a photo</span>
</div>

于 2018-09-28T06:35:57.633 に答える
3

例を参照してください: http://jsfiddle.net/6Rpkh/

<style>
img.likeordisklike { height: 24px; width: 24px; margin-right: 4px; }
h4.liketext { color:#F00; display:inline }
​&lt;/style>

<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

</p>

于 2012-11-28T02:46:06.437 に答える
3

まず、インライン スタイルの使用はお勧めしません。必要に応じて、各アイテムにフロートを適用してみてください。

<img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>
<h4 style='float:left;" class='liketext'>$likes</h4>
<img style='float:left; height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>
<h4 style='float:left;" class='liketext'>$dislikes</h4>

後で微調整し、フロートをクリアする必要がある場合があります。

于 2012-11-28T02:42:46.030 に答える
2

この場合、display:inline または inline-block を使用できます。

例：

img.likeordisklike {display:inline;vertical-align:middle;  }
h4.liketext { color:#F00; display:inline;vertical-align:top;padding-left:10px; }
<img class='likeordislike' src='design/like.png'/><h4 class='liketext'>$likes</h4>
<img class='likeordislike' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>

float:left を使用しないでください。もう 1 行明確な行とその古いメソッドも記述する必要があるためです。

于 2016-10-28T17:53:31.200 に答える
2

H4 エレメンタルは、ブロック表示タイプのエレメントです。H4 にインライン表示タイプを強制するか、代わりに P などのインライン要素を使用して、必要に応じてスタイルを設定することができます。

参考: http://www.w3.org/TR/CSS21/visuren.html#propdef-display

したがって、H4 の表示タイプを次のように変更します。

<html>
<head>
   <title>test</title>
   <style type='text/css'>
     h4 { display: inline }
   </style>
  </head>
  <body>
  <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/><h4 class='liketext'>$likes</h4>
  <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/><h4 class='liketext'>$dislikes</h4>
</body>
</html>
于 2012-11-28T02:48:27.630 に答える
0

あなたのDEMOimgの中にあなたを挿入してみてくださいh4 

<h4 class='liketext'><img style='height: 24px; width: 24px; margin-right: 4px;' src='design/like.png'/>$likes</h4>
<h4 class='liketext'> <img style='height: 24px; width: 24px; margin-right: 4px;' src='design/dislike.png'/>$dislikes</h4>​
于 2012-11-28T02:36:16.230 に答える