1

これが私が求めている効果です

blahblahblah blah blah blahblahalhab foo bar.
------------           -------------
     A                       B

HTML/CSS/JavaScript の下線付きの単語のすぐ下にある A および B ラベルを取得するにはどうすればよいですか?

始めること： 

<p><span><u>text number 1</u></span> followed by <span><u>text number 2</u></span> end of sentence</p>
<p>        <span>A</span>                                  <span>B</span></p>
4

3 に答える 3

6

マークアップ (HTML):

<span class="labeled">blahblahblah<span class="label">A</span></span> blah blah <span class="labeled">blahblahalhab<span class="label">B</span></span> foo bar.

スタイル (CSS):

span.labeled {
    display: inline-block;
    vertical-align: top;
}
span.labeled span.label {
    display: block;
    text-align: center;
    border-top: 1px solid black;
}

デモ: http://jsfiddle.net/SxaK6/

結果：

ここに画像の説明を入力

于 2013-02-04T13:36:48.483 に答える
1

それを行う別の方法は、視覚効果だけが必要で、必ずしもHTMLfor 'A' および 'B' <span>s を持たない場合は、次を使用することCSS3 :before pseudo-elementです。

HTML

<span id="a" class="labeled">blahblahblah</span> blah blah 
<span id="b" class="labeled">blahblahalhab</span> foo bar.

CSS

span.labeled {        
    border-bottom: 1px solid black;
    position: relative;
}

.labeled:before{
    margin-top: 25px;
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
}
#a:before{
    content: 'A';
}
#b:before{
    content: 'B';    
}

デモ: http://jsfiddle.net/cu8Q5/

于 2013-02-04T14:00:28.037 に答える
0

マークアップの下線付き要素内にラベルを追加し、 CSS で再配置します。

<span class="underlined">
   blahblahblah<span class="label">A</span>
</span> 
blah blah 
<span class="underlined">
   blahblahalhab<span class="label">B</span>
</span>
foo bar.

.underlined {
    position: relative;
    text-decoration: underline;
}

.label {
    position: absolute;
    top: 105%;
    display: block;
    width: 100%;
    text-align: center;
}

http://jsfiddle.net/AyC84/

于 2013-02-04T13:35:27.857 に答える