CSSタブの配置

css html
CSSタブの配置

私はCSSでタブをシミュレートするために順序付けられていないリストを使用しようとしていますが、私が作成したものはそれらの下のフォームに拡張されます(もちろん意図していません)

リンクを左にフローティングしてタブを作成しました。 これは私が欲しいものです、画像:https://i.stack.imgur.com/yunhp.png [ここに画像の説明を入力してください]

しかし、残念なことに、これが得られているものです。 タブがフォームの「入力」要素をどのように置き換えるかに注目してください。 何が起こっている?

image:https://i.stack.imgur.com/76XKD.png [ここに画像の説明を入力]

これが私のマークアップとCSSです

        google search
        show all names
        logout



                first name


        //more elements added here

そして、ここにstyle.cssがあります

label
{
    text-align:right;
    width:150px;
    float:left;
    clear:both;
    margin-right:5px;
}

div.simpledata
{
    margin-top:5px;
}

ul
{
    list-style:none;
}

ul.tabs a
{
    float:left;
    margin-right:10px;
    color:white;
    text-decoration:none;
    background-color:#00e;
}

#page
{
    background-color:#eee;
    margin-left:130px;margin-right:130px;
    height:180px;
}

  0  0


ベストアンサー

あなたが使用することができます:

form {
    clear: both;
}

form(およびその子要素)を` ul`の下に強制的に表示します。

2


ulの後にクリアdivまたはbrを追加する必要があります。

1


ラベルcssブロックのfloat:leftを削除しました。

1


リストの「overflow」スタイルプロパティを「hidden」に設定しても機能するはずです。

ul
{
    list-style:none;
    overflow:hidden;
}

0


タイトルとURLをコピーしました