1

画像の横にあるテキストを希望どおりにフォーマットできない垂直ナビゲーション バーを作成しています。マージンを使用して画像を操作できます。欲しいところは持ってます。ここで、テキスト マージンを操作しようとしましたが、効果がありません。みたいですね……。

例

HTML:

<div class="content_nav">
  <div class="content_nav_item"><a href="#"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></a></div>
  <div class="content_nav_hr">&nbsp;</div>
  <div class="content_nav_item"><a href="#"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></a></div>
  <div class="content_nav_hr">&nbsp;</div>
  <div class="content_nav_item"><a href="#"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></a></div>
  <div class="content_nav_hr">&nbsp;</div>
  <div class="content_nav_item"><a href="#"><img src="images/icon.jpg" height="60px" width="60px" alt="One"><span class="content_nav_item_text">One</span></a></div>
</div>

CSS:

.content_nav{
margin:45px 0px 45px 48px;
padding:0px;
width:232px;
height:467px;
background-color:#82c738;
box-shadow:inset 0px 0px 10px #578e30;
float:left;
}
.content_nav_item {
margin:0px 10px 0px 10px;
padding:0px;
height:115px;
}
.content_nav_hr {
margin:0px 10px 0px 10px;
padding:0px;
height:1px;
width:202px;
background-color:#A0DF5C;
}

.content_nav_item_text {
margin:10px 0px 10px 0px;
padding:0px;
}
.content_nav_item img {
margin:28px 10px 0px 20px;
padding:0px;
display:inline;
}

そのスパンを配置できない理由について何か考えはありますか?

4

2 に答える 2

1

テキストは、CSS では奇妙な鳥のようなものです。テキストは、ユーザーが考えたり、望んでいる方法で処理されません。これは、縦方向のテキスト配置の特異性を説明する良い記事です。

于 2012-05-16T12:50:10.677 に答える
0

テキストはspanタグの間にあります。このタグはaタグとタグの間にありdivます。それらを分離する必要があります。それらはテキストを積み重ねており、テキストが移動するのを防ぎます。

imgタグを「終了」する必要があります

于 2012-05-16T12:54:49.387 に答える