0

これは私を苛立たせています...私は次のようなものを作ろうとしています:

   Logo

img|h1|img

サブタイトルを囲む画像は、このように見える単なる水平線です

--- サブタイトル ---

HTMLは次のとおりです。

<div>
     <a href="#">
     <img class="logo" src="#" alt="..."/></a>
 </div>
 <div class="subtitle">
     <img class="1" src="#" width="60" height="1" alt="..."/>
     <h1>subtitle text</h1>
     <img class="2" src="#" width="60" height="1" alt="..."/>
 </div>

別の div 内に要素を配置し、幅を定義しようとしました: %; margin:0 auto; を持つその div の場合。しかし、それに関する問題は、ユーザーがブラウザ内でテキスト サイズを大きくすると、正しい画像が次の行に移動することです。

どんな助けでも素晴らしいでしょう。ありがとう！

4

2 に答える 2

1

とを使用display: inlineしwhite-space: nowrapてこれを実現できます。

.subtitle {
    text-align: center;
    white-space: nowrap;
}
.subtitle h1 {
    display: inline;
}
于 2012-10-10T00:37:08.113 に答える
1

ブロックの h1 要素内にインライン img タグを配置してから、H1 タグを次のようにスタイリングしてみてください。

CSS:

h1{
 width: 100px; /* whatever width you prefer*/
 text-align: center;
}

HTML:

 <h1>
    <img class="1" src="#" width="60" height="1" alt="..."/>
    subtitle text
    <img class="2" src="#" width="60" height="1" alt="..."/>
 </h1>

例: http://jsfiddle.net/sujvM/ 注*: 何らかの理由で、画像を jsfiddle にロードするには実行ボタンをクリックする必要があります。

于 2012-10-10T00:38:20.463 に答える