0

フローティング リンクを含む div があります。「width:auto」のプロパティと値をdivに適用しました。しかし、何らかの理由で、浮動要素の合計幅を推測するだけでなく、div が行全体を占めています。私は何を間違っていますか？

JSFIDDLE: http://jsfiddle.net/X9anU/3/

CSS:

#user-links {
margin-right: auto;
margin-left: auto;
height: auto;
width: auto;
padding: 0px 0px 0px 0px;
overflow: auto;
}

.user-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 10px;
}

.user-link a {
text-decoration: none;
font-family: calibri;
font-size: 16px;
color: #fff;
}

.user-link a:hover {
text-decoration: underline;
}
4

4 に答える 4

3

左右のマージンを に設定したからといっautoて、div が折りたたまれるわけではありません。

浮かせた子も、横軸で崩れることはありません。

リンクを中央に配置しようとしている場合は、リンクを に設定しdisplay: inline-block;、フロートを削除しtext-align: center;て、#user-linksdiv に適用できます。

このような：

#user-links {
    margin-right: auto;
    margin-left: auto;
    height: auto;
    width: auto;
    padding: 0px 0px 0px 0px;
    overflow: auto;
    text-align: center;
}
.user-link {
    display: inline-block;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
}

作業例: http://jsfiddle.net/X9anU/13/

于 2013-04-10T16:44:00.467 に答える
1

A<div>はデフォルトでブロック レベルの要素であり、特に指定がない限り、親の幅にまたがります。この場合、 width: auto は親コンテナーの幅を想定しています。

#user-links要素をコンテンツの幅のみに広げ、コンテナ内の中央に配置する場合は、CSS の宣言に割り当てる必要がありdisplay: tableます#user-links。

#user-links {
    display: table;
    margin: 0 auto;
}

更新されたフィドル: http://jsfiddle.net/X9anU/16/

サポートするブラウザーのリストは次のdisplay: tableとおりです: http://caniuse.com/css-table

于 2013-04-10T16:46:18.557 に答える
1

これがブロック レベル要素のデフォルトの動作です。幅を指定しない限り、子孫の表示値に関係なく、100% の幅を使用します。また、幅を指定せずに自動左右マージンを使用して要素を中央に配置することもできません。

に明示的な幅を与える#user-links

http://jsfiddle.net/X9anU/6/

于 2013-04-10T16:41:28.660 に答える
0

試してください：

width: 960px;

Web サイトのサイズとして 960px を使用する人がほとんどです。特に、グリッド システムを使用する Photoshop では、ほとんどのモニターのサイズに適合するためです。他の番号も可能です。

andが に設定されているため、 の div 内の要素fixed widthは中央に配置されます。margin-leftmargin-rightauto

違いを示すためだけに使用するjsfiddleの例。width: 500px;

于 2013-04-10T16:41:10.227 に答える