0

こんにちは友人私はcssに問題があります私はdivタグをインラインに変換したい

<div id="menu1">
 <ul>
 <a href="#"> <li>  one</li> </a>
 <a href="#"> <li>  two</li> </a>
 <a href="#"> <li>  three</li> </a>
 <a href="#"> <li> four </li> </a>
 <a href="#"> <li> five</li> </a>
 <a href="#"> <li>six </li> </a>
 <a href="#"> <li> seven </li> </a>
 <a href="#"> <li> eight </li> </a>
 </ul>
 </div>

<div id="menu2">
<ul>
<a href="#"> <li>  one</li> </a>
<a href="#"> <li>  two</li> </a>
<a href="#"> <li>  three</li> </a>
<a href="#"> <li> four </li> </a>
<a href="#"> <li> five</li> </a>
<a href="#"> <li>six </li> </a>
<a href="#"> <li> seven </li> </a>
<a href="#"> <li> eight </li> </a>
</ul>
</div>

インライン表示を使用して、メニュー1を左側に表示し、メニュー2を右側に表示したいのですが、機能していません。

4

4 に答える 4

2

私は提案します：

div {
    width: 48%;
    float: left;
}

JSフィドルデモ。

または、ユーザーが準拠したブラウザを使用している場合は、をに設定しwidthて50%、を使用して要素の定義内にをbox-sizing含めることができます。paddingborder-widthwidth

div {
    width: 50%;
    float: left;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JSフィドルデモ。

同様に、準拠しているブラウザがあれば、代わりにcolumn-countプロパティを使用して、ブラウザがコンテンツに適合する特定の数の列を定義できます。これが機能するために、現在の（ひどく無効な）htmlを別の要素idで'wrapper'でラップしました。

#wrapper {
    -moz-column-count: 2;
    -ms-column-count: 2;
    -o-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

JSフィドルデモ。

WebkitとOperaのサポートのみを要求するオプションがあり、ユーザーがFirefoxのインストールでフレックスボックスのサポートを有効にしている場合は、CSSフレックスボックスモデルを使用するオプションになりますが、2つを含めるにはラッピング要素が必要です。次のCSSを使用したメニュー要素：

#wrapper {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
}

#wrapper > div {
    display: -webkit-flex-inline;
    -webkit-flex: 1 1 auto;
}

JSフィドルデモ。

-webkit注：WebKitの実装には接頭辞;を付ける必要があります。Geckoの実装には接頭辞はありませんが、設定の背後にあります（Nightlyを使用している場合を除く）。Internet Explorerは、プレフィックスが付いた古いバージョンの仕様を実装しています。Opera 12.10は、プレフィックスなしの最新バージョンの仕様を実装しています。

無効なマークアップ

<div id="menu1">
 <ul>
       <a href="#"> <li>  one</li> </a>
       <a href="#"> <li>  two</li> </a>
       <a href="#"> <li>  three</li> </a>
       <a href="#"> <li> four </li> </a>
       <a href="#"> <li> five</li> </a>
       <a href="#"> <li>six </li> </a>
       <a href="#"> <li> seven </li> </a>
       <a href="#"> <li> eight </li> </a>
    </ul>
</div>

a （または）の唯一の有効な子要素は：です。他の要素は、要素でラップされていない限り、またはで許可されていません。したがって、HTMLを修正するには、次のようにする必要があります。ulolliulol li

<div id="menu1">
 <ul>
       <li><a href="#">one</a></li>
       <li><a href="#">two</a></li>
       <li><a href="#">three</a></li>
       <li><a href="#">four</a></li>
       <li><a href="#">five</a></li>
       <li><a href="#">six</a></li>
       <li><a href="#">seven</a></li>
       <li><a href="#">eight</a></li>
    </ul>
</div>

をで囲む目的が、要素のクリック可能な領域をで埋めることliであった場合は、単に次を使用します。aalia { display: block; }

参照：

于 2013-02-10T17:16:45.030 に答える
0

float: left2秒間試してみませ<div>んか？

DEMOを参照してください。

#menu1, #menu2 {
    float:left;
}
于 2013-02-10T17:14:06.487 に答える
0

CSSfloat属性を使用すると、探しているものを実現できます。

#menu1 {
    float: left;
}
#menu2 {
    float: left;
}

このフィドルを例として見ることができます。

関連項目

于 2013-02-10T17:17:23.057 に答える
0

リストをインラインブロックで表示する必要があると思います（インラインブロックを使用すると、初期幅を維持できます）。

#menu1, #menu2 {
   display:inline-block;
}

オリヴィエ

于 2013-02-12T14:36:15.130 に答える