2

CSSとHTMLに関して問題があります。

別の要素（この場合はUL）の周りにDIVをラップし、それをラップすると同時に、両方を中央に配置しようとしています。追加のボーナスとして、ラッピングDIV内のコンテンツの幅は動的である必要があるため、特定の幅を設定することはできません（これは基本的にテンプレートであるため）。

フローティングを試してみましたが、ラッピングに関しては機能しますが、最終的には右または左になります。

私はこれに少し夢中になるでしょう、そしてグーグルは助けにはなりません！

前もって感謝します！

アップデート：

コードや画像が含まれていないことをお詫び申し上げます。これは私が画像で説明しようとしていることです：

UL幅の1つの状態

幅の別の状態

ラッピングDIVは、コンテナーの幅全体を伸ばすことはできません。ULをラップアラウンドする必要があります。

濃い灰色はULの周りのDIVです。上で述べたように、ULのコンテンツは時々異なるため、コンテンツの幅に関係なく、DIVがUL（水平レイアウト）をラップアラウンドする必要があります。LIのテキストが変更されます。

また、中央に配置する必要があります。フロート左とフロート右で動作するようにしましたが、中央に配置する必要があります。

これは、コンテナDIVとULおよびLI要素に現在使用しているコードです。

#container{
    height: 100px;
    width: 500px;
    font-size: 14px;
    color: #grey;
    display: table-cell;
    vertical-align: middle;
}
#container ul{
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
}
#container li{
    background: url(checkmark.png) center left no-repeat;
    display: inline;
    padding-left: 20px;
    margin-right: 5px;
}
#container li:last-child{
    margin-right: 0;
}
4

5 に答える 5

8

更新しました

わかった。探していたのはこれですか？？http://jsfiddle.net/vZNLJ/20/

#wrapper {
    background: #ccc;
    margin: 0 auto; /* to make the div center align to the browser */
    padding: 20px;
    width: 500px; /* set it to anything */
    text-align: center;
}
#wrapper ul {
    background: #aaa;
    padding: 10px;
    display: inline-block;
}
#wrapper ul li {
    color: #fff;
    display: inline-block;
    margin: 0 20px 0 0;
}
#wrapper ul li:last-child {
    color: #fff;
    display: inline-block;
    margin: 0;
}
<div id="wrapper">
    <ul>
        <li>Menu</li>
        <li>Menu</li>
        <li>Menu</li>
    </ul>
</div>

于 2012-07-24T10:47:36.077 に答える
1

問題は、DIV をコンテンツの周りにラップすることではなく、コンテンツが実際のサイズであることを示すことで、DIV の境界を押し出すことです。この問題に取り組む際には、考慮すべき点がいくつかあります。既存の UL または LI タグからだけでなく、DIV 内の DIV。

カスタム タグを使用して、レイアウトをわかりやすく説明します。カスタム タグは DIV タグであるため、適切な動作を得るには、そのプロパティを CSS で操作する必要があります。

<layout-linear horizontal>
    <control-label>Label 1</control-label>
    <control-label>Label 2</control-label>
    <control-label>Label 3</control-label>
    <control-label>Label 4</control-label>
    <control-label>Label 5</control-label>
</layout-linear>

このレイアウトは、コンテンツ .. コントロール ラベル タグ .. が横一列に表示されることを示唆しています。layout-linear タグの境界線を control-label タグのコンテンツを囲むようにするには、いくつかのことを行う必要があります。

layout-linear[horizontal]
{
    display : block;
    box-sizing: border-box;
    border : 1px solid black;
    padding : 1px 1px 1px 1px;
    white-space: nowrap;
    width : 100%;
    clear : both;
    text-align : center;
}

まず、box-sizing プロパティを border-box に設定する必要があります。これにより、リニア レイアウト (DIV) タグが強制的にコンテンツをラップします。パディング、ボーダー、マージンは、空の DIV タグが表示されることを保証します。空の DIV タグを表示させるその他のトリックは、 or :after { content:.; を使用することです。可視性: 非表示; }。

コントロール ラベル タグを折り返したくない場合は、空白を追加します: nowrap.

control-label タグの float プロパティについて説明するときに、text-align について説明します。

次の部分では、ボックスのサイズ変更タイプと境界線を適切に指定するために、内側の DIV タグ (コントロール ラベル) が必要です。

control-label
{
    display : inline-block;
    /* float : left; */
    box-sizing: border-box;
    border : 1px solid black;
    margin : 5px 5px 5px 5px;
    padding : 5px 5px 5px 5px;
}

Display : inline-block。コントロール ラベル タグを左から右にフローさせます。表示 : ブロック。タグが垂直に積み上げられます。

フロートは、マージン、パディング、ボーダーに基づいて、レイアウト線形タグが最小のボックス サイズに縮小されるという事実に注意を引くために、特にコメント アウトされています。

コントロール ラベルが右から左に流れるようにするには、text-align : right を layout-linear タグに追加します。または、この特定のケースでは、text-align : center を設定します。

繰り返しになりますが、ボックスのサイズ変更は、コントロール ラベル (DIV) タグにそのコンテンツを完全にラップするように指示するために使用されます。テキストだけでなく、境界線、パディング、マージンの設定によって描かれたボックスの端。

この CSS プロパティの配置により、外側のボックスと内側のボックスが適切に、または期待どおりにレンダリングされます。

ハッピーコーディング。

于 2016-07-28T07:19:52.997 に答える
0

これは役立つかもしれません。幅を設定できない場合align='center'は、divラッピングに追加するだけですul

<div align="center">
<ul>
    <li>MenuItem</li>
    <li>MenuItem</li>
    <li>MenuItem</li>
</ul>
</div>
于 2012-07-24T11:13:03.553 に答える
0

あなたはコードを提供しませんでしたが、私がセットアップしたばかりのこのフィドルを見てください。

http://jsfiddle.net/qXDJr/

私があなたの言いたいことを誤解している場合はお知らせください。サンプルコードは、将来の参照に常に役立ちます。

于 2012-07-24T10:30:36.883 に答える