0

メールを画像にしたかったので、テキストとメールアドレスを画像に入れました。その行の後に別の行があります。これは同じ行のテキストとリンクです。

しかし、問題は、同じdivタグ上にない場合でも、何らかの理由で2行目（テキストとリンクを含む）が1行目のパラメーターでフォーマットされていることです。なぜフォーマットされているのかまったくわかりません（最初の行とそのすべてのフォーマットを削除すると、www：linkは1行になります）。私はそれをバイパスすることができるだけです：

<br /> // or another spacings such as padding-bottom.

ただし、行間の間隔を最小限に抑えたいと思います。

これをより明確にするために、スクリーンショットがあります。これは現在どのように表示されているかを示しています。 私の2つのhtml行の現在の状態

htmlコード：

<div class="col3">
Email:
<img  class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/>
</div>
<div>
 www: <a href="http://www.test.com/">http://www.test.com</a>
 </div>

cssスタイル：

 .col3 { 
width:140px; 
height:15px;
padding-bottom:10px;
 }

 .image-align {
float:right; 

  }

また、私はワードプレスを使用していますが、生のhtmlプラグインを持っていて、生のタグを試し、すべてのワードプレスのフォーマットを無効にしましたが、それは同じことです。誰かが何が間違っている可能性があるか知っていますか？

私がやりたいのは、2行目が次のようになることです。

www: http://www.test.com

このようではありません：

wwww:
http://www.test.com
4

3 に答える 3

2

あなたはこれを試すことができます：

HTML

<div class="col3">
  <div class="email">Email:</div>
  <img  class="image-align" src="http://safemail.justlikeed.net/e/931d68fcf4daa5643b0142bf34f3e4cb.png"/> </div>
<div class="sitelink">www: </div>
<div class="link"><a href="http://www.test.com/">http://www.test.com</a> </div>

CSS

.col3 {
    padding-bottom:10px;
}
.email {
    float:left
}
.image-align {
    display:inline-block;
    margin-left:5px
}
.sitelink {
    float:left
}
.link {
    display:inline-block;
    margin-left:5px
}

デモ

于 2012-08-07T12:18:02.097 に答える
0

クラスをdivに割り当て.col3ます。スタイルシートで以前にすべてのdivの幅を指定した可能性があり、それを上書きする必要があります（上記のdivと同じ幅にします）。

于 2012-08-07T11:40:04.427 に答える
0

あなたの幅が問題です、代わりにもっと大きな値を入れてみてください。それがどのように機能するかを教えてください。

于 2012-08-07T11:45:31.370 に答える