html - href リンクを左に、テキストの説明を右に配置する最適な方法

Question

これは私には簡単に思えますが、何日も試して (私は経験が非常に限られています)、解決策を探した後、空白を描きました。ブラウザーウィンドウで使用するための css スタイルが埋め込まれた単一の html ページにリンクのページを作成しています。

リンクをdivの左側に配置し、リンクのテキスト説明をdivの右側に配置したいだけです。リンクのボックス (カテゴリ) を含むこれらの他の div の 2 つ (右と左) を含むラッパー div があります。最初の例は、目的のスペースを作成するためにピリオドを使用しているだけです。

これまでのところ、以下の HTML を試しました。

<html>
<body>
    <div class="wrapper">
        <div class="div_body_side1">
            <div id="div_category01">
                <p>
                    <A HREF="http://www.webaddress" > Short Description
                    </A>.................... Longer description of where this link will take you
            </p>
            </div>    
        </div>
    </div>
</body>
</html>

また、この方法 (以下) を試すことも考えましたが、長い説明のテキストに色を付けて、カテゴリ div の右端に揃える方法がわかりません。

 <tr>
 <td>
 <A HREF="http://www.webaddress" > Short Description</A>
 </td>
 <td>
  Longer description of where this link will take you
 </td>
 </tr>

目的を達成するために、各カテゴリ内にさらに 2 つの div を横に並べて作成する必要がありますか? また、小さなラップトップで使用するために、div とテキストを水平方向に「縮小」(スケーリング) する必要があります。

専門知識がなくて申し訳ありませんが、本当に何日も解決策を探していました。よろしくお願いいたします。…………………………………… …………

またあったね。残念ながら、Billy Chan の回答はうまくいきませんでした (しかし、'title' 属性を使用するよう思い出させてくれてありがとう)。3 つのリンクのリストで試してみましたが、出力は次のようになります。

リンク1リンク2リンク3 説明1説明2説明3

これが私が使用したものです：

<div>
    <span class="link">
    <a href="#whatever">Whatever</a></span>
    <span class="explanation">Whatever explain</span>

    <span class="link">
    <a href="https://www.google.com.au"title="Google">Google search</a>
    </span>
    <span class="explanation">Secure Google search page
    </span>

    <span class="link">
    <a href="http://www.google.com/ncr" >Google search</A>
    </span>
    <span class="explanation">US Google search page
    </span>

</div>

...次の CSS を使用:

<style>
    .link, .explanation {display:inline}
    .link {float: left}
    .explanation {float: right}
</style>

親切に提供された他の解決策を試してみましょう。どうもありがとうございました。

...................................................

dbaseman さん、ありがとうございます。あなたのソリューションでは、私のカテゴリ div 内にさらに 2 つの div が必要ですよね? 「div class="right"」を私のカテゴリ div (ID) に適用できません。

Urg mu のソリューションを試してみます。乾杯。

ああ..おっと-テキストのみに色を付けるためのソリューションを提供したようです。あなたの解決策は、私の「長い説明」を右に揃えるつもりはありませんか?

ナビーン・シャルマへ。申し訳ありませんが、あなたのソリューションが実際に何をすべきかを説明していただけますか?

ありがとうございました。私はたくさんのことを学んでいます。
乾杯。

私が達成しようとしていることのこの恐ろしい jsFiddle バージョンを見てください。はい、ここには多くのテストと「ソリューション」が含まれています..、ブラウザウィンドウを右端にドラッグし、「結果」ウィンドウを左端にドラッグして、2 つの div を並べて表示する必要があります。 -側：

http://jsfiddle.net/wreckanoid/CdN2z/

score 2 · Accepted Answer

直接の答え:

リンクと説明をラップするために 2 つのスパンを使用します。例

<div id="catgory01">
  <span class="link"><a href="#whatever">Whatever</a></span>
  <span class="explanation">Whatever explain</span>
</div>

次に、2 つのスパンのスタイルを定義します

<style>
  .link, .explanation {display:inline}
  .link {float: left}
  .explanation {float: right}
</style>

リンクをラップする理由は、すべてのリンクがこのように動作することを望まない場合があるためです。

この回答は機能するはずですが、リンクアンカーまたは説明が長すぎるという問題が発生する可能性があります。それらは重複する可能性があります。そこだけ注意してください。

さらなる回答: リンクを説明する正しい方法は、 title 属性を使用することです

<a href="#whatever" title="Explanation">Whatever</a>

このように、リンクにカーソルを合わせるとヒントが表示されます。

score 0 · Accepted Answer

CSS

div {  width:400px; border:red 1px solid; padding:10px 0px; }
p {  overflow:auto; margin:0px;
    background:url('http://reference.wolfram.com/legacy/MathematicaCharacters/Ellipsis.gif') 100% repeat-x ;
}
a {
    float:left; padding:0px 5px 0px 10px;
    background-color:#fff;
}
.desc {
    float:right; padding:0px 10px 0px 5px;
    background-color:#fff;
    color:#333;
}

HTML

<div>
  <p>
    <a href="#link" >IAClient</A>
    <span class="desc">QUT Internet Access Client</span>
  </p>
  <p>
    <a href="#link" >AARNet</A>
    <span class="desc">AARNet's FTP & HTTP Mirror</span>
  </p>
</div>

http://jsfiddle.net/CZt8R/

score 0 · Accepted Answer

ここに私が落ち着いたものがあります。リンクと説明の間にアンダースコアを追加するかもしれませんが、ブラウザーで使用するための優れた埋め込み CSS リンクメニューページの基礎ができたと思います。結果は次のとおりです。

http://jsfiddle.net/wreckanoid/zV9Sd/embedded/result/

コードは次のとおりです。

http://jsfiddle.net/wreckanoid/zV9Sd/

.wrapper
{
position:relative;
background-color: #e7ecfa;
width: 90%; 
margin-left:15%;
margin-right:15%;
height:auto;
display: block; 
overflow:auto; 
border:inset .5em #ccffff;
margin: 1em auto;
box-shadow: 0 0.3em 1em #000000;    
}

.div_body_side1
{
float: LEFT;
position:relative;
text-align: left;
/*  border: solid 1px #d1d7e5; */ 
width: 45%;
display: block; 
margin-left: 2.5em;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
white-space:normal;
clear:none;
}


.div_body_side2
{   
clear:none;
float:left;
position:reative;
text-align: left;
/*  border: solid 1px #d1d7e5;  */ 
width: 45%;
display:inline;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
}   

#div_category01, #div_category02, #div_category03, #div_category04,     #div_category05, #div_category06, #div_category07, #div_category08, #div_category09
{
background-color: #eff5fb;
margin: 1em 1em;
width: auto;
display: block;
border:ridge 6px #ff3333;
box-shadow: 0 0.3em 1em #000000;
position:relative;
clear:both;
}


.center
{
text-align: center;
}

.right 
{
float: right;
padding-right: 20px;
color: #cc6600;
}

body 
{ 
margin:0;
padding:0;
}

h1
{
text-align: center;
}

h2 
{
text-align: center;
}

img.center
{   
display: block;   
margin: 0 auto;
}

a 
{ 
color: blue;
padding-left: 20px;
}

HTMLは次のとおりです。

</head>

<body>

<div class="wrapper">

<H1> Test Bookmarks Menu</H1>

<a href="http://www.qut.edu.au" >
<IMG SRC="http://www.tils.qut.edu.au/graphics/logo.gif"
BORDER="4" title="QUT logo" alt="QUT logo" class="center" /></a>



    <div class="div_body_side1">

        <div id="div_category01">

    <H2>CATEGORY 1 HEADER</H2>
    <br>

    <a href="https://www.google.com.au/" > Google Australia
    </a>

    <span class="right">
        Google Secure, Australia
    </span><br><br>

    <a href="https://www.google.com/ncr" > Google USA
    </a>

    <span class="right">    
        Google Secure, USA
    </span><br><br>

    <a href="https://encrypted.google.com/" > Google Encrypted
    </a>

    <span class="right">    
        Google Secure, Encrypted
    </span><br><br>

    <a href="https://www.google.com.au/" > Google Australia
    </a>

    <span class="right">
        Google Secure, Australia
    </span><br><br>     


    </div><!-- close category01 -->



</div><!-- close div_body_side1 -->



<div class="div_body_side2">

    <div id="div_category05">

    <H2>Category 5 Header </H2>

        <a href="https://www.google.com.au/" > Google Australia
        </a>

    <span class="right">            
        Google Secure, Australia
    </span><br><br>

        <a href="https://www.google.com/ncr" > Google USA
        </a>

    <span class="right">            
        Google Secure, USA
    </span><br><br>     

        <a href="https://encrypted.google.com/" > Google Encrypted
        </a>

    <span class="right">            
        Google Secure, Encrypted
    </span><br><br>

        <a href="https://www.google.com.au/" > Google Australia 
        </a>

    <span class="right">            
        Google Secure, Australia
    </span><br><br>


    </div><!-- close category05 -->



</div><!-- close div_body_side2 -->

皆さんのおかげで、私は今、この CSS のことを把握できていると感じています.. ! :-)

また、すべてのリンクに「タイトル」タグを追加します。乾杯。

score 0 · Accepted Answer

簡単な方法の 1 つは、リンクと説明でそれぞれとfloat: leftを使用することです。float: right

HTML

<a href="http://www.webaddress" > Short Description </a>
<div class="right">.................... Longer description of where this link will take you</div>

CSS

a { float: left; }
.right { float: right; }

これがデモです。

投稿の更新を編集

この種のレイアウトを取得するための 2 つの鍵:

リンクと説明には固定 (パーセンテージベース) の左余白を使用します。
省略記号の長い文字列 "......"overflow-x: hiddenを表示し、余分な部分を非表示にするために使用します

別のデモ。

score 0 · Accepted Answer

あなたが与えたHTMLに、次のコード行を追加します

<style>
.div_body_side1 p a{width:200px;float:left}
</style>

ライブデモ

html - href リンクを左に、テキストの説明を右に配置する最適な方法

5 に答える 5

Related

Reference