0

HTMLとCSSを使用して次のことを行うのが難しいと感じています。

このページがあります: http://www.onofri.org/example/example4/

ご覧のとおり、「投資を促進するための政策枠組みの作成」というタイトルのボックスがあります。#policyFrameworkBox div

このボックスには、その<li>中に4つの要素を持つ順序付けられていないリストがありますclass="floattedList"

liこの要素を 2 つの列にグループ化します。

1 行目の最初と 2 番目のli要素li、2 行目の 3 番目と 4 番目の要素。

それを行うために、次の操作を実行しようとしていました。

#policyFrameworkBox li{
    font-size: 11px;
    color: #004673;
    font-family: Verdana;
    font-weight: bold;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    width: 50%;
}

li実際には、要素を互いに隣接するようにフロートさせ、幅を 50% に設定して、2 つliの要素がスペース全体を占めるようにしますli。2 行目の他の 2 つの要素を見てください。

しかし機能せず、li要素はまだ列に表示されます

なんで？1 行li目の 2 番目の隣に 1 番目を表示し、2 行目の 4 番目の隣に3 番目を表示するにはどうすればよいですか?lilili

TNX

アンドレア

4

2 に答える 2

1

それらが同じ行に表示される理由は、幅です。50% + 4% のパディングで、同じ行に 2 つを配置するには十分なスペースがありません。幅を < 48% に変更します。

ただし、これは完全な解決策ではありません。最初の 2 つの項目が同じ行にあり、必要に応じて同じ行にありません。これを修正するには、マークアップを再配置するか、2 つのリストに分割します。

于 2013-10-03T09:01:14.040 に答える
1

幅を 46% にしてみてください。

padding-left の 2% と padding-right の 2% で、合計は 50% になり、実際には 54% です;)

于 2013-10-03T09:01:25.543 に答える