2

2つのulを含むdivがあります。最初のulを彼の右側に配置し、2番目のulを中央に配置したいと思います。
ネストされた要素やモバイルビューで他の問題が発生するため、絶対位置を使用できません。

これは私がやったことです：

<div class="w">
    <ul class="right"><li>a very very very long text</li></ul>
    <ul class="center"><li>center</li></ul>
</div>

.w {
    text-align: center;
    display: inline-block;
    width: 100%;
}

ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
}

li {
    float: left;
}

.right {
    float: right;
}

.center {
    display: inline-block;
}

ここでjsfiddleを見ることができます：http：//jsfiddle.net/mF7XR/

問題は、中央のulが左と右のulの始点の中央に配置されていることです（例を参照）。したがって、正しく中央に配置されていません。2番目のulを中央で修正するにはどうすればよいですか？

4

4 に答える 4

1

あなたがjavascriptを使うのが良いかどうかはわかりません。とにかく、私はそれにいくつかの作業をしました。ご覧ください。

javascript

//Added Id to ul.center as "center"
function resize(){
  var width = document.body.offsetWidth;
  var center = document.getElementById('center');
  center.style.marginLeft = (width/2) - (center.offsetWidth/2);
}
//Call the above function on "resize" and "load" events.

CSS

.center {
   display: inline-block;
   float:left;
}

ワーキングビン

于 2013-03-11T12:15:04.107 に答える
0

このソリューションでは、絶対測位を使用しません。Win/Chromeでテスト済み。

に変更.centerします

.center {
    display: inline-block;
    position: relative;
    width: 100%;
    top: -20px; /* move up */
}

このルールを追加します

.center li {
    float: none;
}

jsfiddle

アップデート

コンテンツが不明な場合は、オフセットの相対位置を設定するためにJS（またはjQuery）が必要です。

最初は別のマークアップを使用することを考えましたが、絶対位置を制限すると、このアイデアはほとんど無効になります。

jsfiddle

絶対位置を使用できない理由を知ることは興味深いでしょう。たぶんあなたの問題の根本はそこにあります。

于 2013-03-11T11:25:24.120 に答える
0

どうposition:relativeですか？次に、ネストされた要素やモバイルビューで問題を引き起こすことなく、どこにでも配置できます。

http://jsfiddle.net/mF7XR/4/

于 2013-03-11T11:10:40.160 に答える
0

中央に配置された要素の幅を定義すると、必要なものを取得できるのはあなただけです。マージンを次のように定義することもできます...margin：0{右に浮かぶ要素よりも大きい数}px 0 {ここに左に浮かぶ要素よりも大きい数は、要素が2つしかないため、ここに配置します0} px;

于 2013-03-11T11:29:23.333 に答える