0

HTML/CSS を初めて使用するので、テキストの配置について助けが必要です。テキストはリンクで、2 つのリンクをページの左側に配置し、1 つのリンクを右側に配置したいと考えています。誰でも助けることができますか？これが私のコードです

BACK および HOME ボタンは左に配置され、MISC は右に配置されます。

ありがとうございます。

HTML **

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/portfolio.css">
    </head>

    <body>

        <div class="menu">
            <ul>
                <a href="index.html">BACK</a>
                <a href="index.html">HOME</a>
                <a href="index.html">MISC</a>
                </ul>
        </div>
    </body>
</html>

CSS **

body
{
    background-color: #ffffff;
}

.menu
{
    font-family:"HelveticaNeue-Light", "Arial";
    font-size: 75%;
    color: #1f4462;
    text-align:left;
    margin-left: -36px;
    margin-top: -3px;
    font-style: normal;
    letter-spacing: 1px;
    word-spacing: 3px;
}

a:link 
{
    color:#1f4462;
    text-decoration:none;
}

a:visited 
{
    color:#1f4462;
    text-decoration:none;
}

a:hover 
{
    color:#1f4462;
    text-decoration:none;
}

a:active 
{
    color:#1f4462;
    text-decoration:none;
}
4

7 に答える 7

2

次の css をリンクに追加します。デモ

#left{
    float:left;
}

#center{
    position: absolute;
    left: 48%;
}

#right{
    float:right;
}
于 2013-09-09T13:11:13.173 に答える
0

純粋な CSS ソリューションは次のようになります。

a:nth-child(3n) {
    float:right;
}

また

a:nth-last-child(1) {
    float:right;
}

さらに、有効な HTML を記述します。リストのアンカー要素しかない場合は、navタグを使用する必要があり、余分な div を使用する必要はありません。

<body>
    <nav class="menu">
            <a href="index.html">BACK</a>
            <a href="index.html">HOME</a>
            <a href="index.html">MISC</a>
    </nav>
</body>

から削除margin-leftし.menuます。

于 2013-09-09T13:06:50.137 に答える
0

HTML の構造を改善する必要があります...つまり、ul 要素に... リスト項目としてラベル付けされていないリスト項目を追加しています。配置の問題は、次のコードを使用して修正できます。

時間のために、外部スタイルシートへの参照を削除し、head タグにスタイルを追加しました。HTML のベスト プラクティスを維持するために、head タグからスタイルを削除し、スタイルシートに再度追加することができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
    <style type="text/css">
        body
            {
                background-color: #ffffff;
            }

            .menu
            {
                font-family:"HelveticaNeue-Light", "Arial";
                font-size: 75%;
                color: #1f4462;
                text-align:left;
                margin-left: -36px;
                margin-top: -3px;
                font-style: normal;
                letter-spacing: 1px;
                word-spacing: 3px;
            }

            .menu ul {

            }

            .menu ul li { display: inline-block; }

            .menu ul li.misc {
                float: right;
            }

            a:link 
            {
                color:#1f4462;
                text-decoration:none;
            }

            a:visited 
            {
                color:#1f4462;
                text-decoration:none;
            }

            a:hover 
            {
                color:#1f4462;
                text-decoration:none;
            }

            a:active 
            {
                color:#1f4462;
                text-decoration:none;
            }  
    </style>
</head>

<body>

    <div class="menu">
        <ul>
            <li><a href="index.html">BACK</a></li>
            <li><a href="index.html">HOME</a></li>
            <li class='misc'><a href="index.html">MISC</a></li>
            </ul>
    </div>
</body>
于 2013-09-09T13:05:36.630 に答える
0

HTML

<div class="menu">
            <ul>
                <a href="index.html">BACK</a>
                <a href="index.html">HOME</a>
                <a href="index.html" class="right">MISC</a>
                </ul>
        </div>

CSS

           .right{
            float:right;
        }

デモはこちら

于 2013-09-09T13:00:32.420 に答える
0

style="float:left;" を使用 BACK および HOME ボタンおよび style="float:right;" の場合 MISC用。スタイルを置きます="display:inline;" ulタグ用。

于 2013-09-09T12:57:33.567 に答える
0

どうぞ。

ワーキングデモ

コード：

<a href="index.html" style="float: right;">MISC</a>

これがあなたが探しているものであることを願っています。

于 2013-09-09T12:57:45.937 に答える