1

状況：私はいくつかのリストを持っています。これらの各リストでは、最初のli内のテキストは、次のli要素のように正確に中央に配置されるのではなく、中央の少し右側に配置されます。次の例では、2行目のテキスト（「サイトマップ」）が中央に配置されていません。何か案は？

html：

<body>
<!-- <div class="header">Module Settings</div>  -->
<div class="left_content">      
    <div id="header_nav" class="moduleTypeContent" style="top:-50px" name="header_nav">
        <div class="moduleTypeHeader">          
            <div class="text-center">header_nav</div>                   
        </div>                  
        <ol class="connectedSortable sortable used nonest">                                         
            <li id="list_39">                   
                <div class="listItemContents">                                                          
                    <div class="moduleTypeItem left">
                        <a href="?file=Administration/navigation/index.cfm&deleteModule=39" class="deleteRow"><img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Site Map" width="16" height="16" border="0"  class="icon rightspace" /></a>
                    </div>                                  
                    <div class="moduleTypeItem center text-center">
                        <a href="?file=Administration/navigation/index.cfm&id=39">Site Map</a>
                    </div>                                  
                    <div class="moduleTypeItem right text-center">
                        all
                    </div>                          
                </div>                      
            </li>
            <li id="list_38">                   
                <div class="listItemContents">                                                          
                    <div class="moduleTypeItem left">
                        <a href="?file=Administration/navigation/index.cfm&deleteModule=38" class="deleteRow"><img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Contact Us" width="16" height="16" border="0"  class="icon rightspace" /></a>
                    </div>                                  
                    <div class="moduleTypeItem center text-center">
                        <a href="?file=Administration/navigation/index.cfm&id=38">Contact Us</a>
                    </div>                                  
                    <div class="moduleTypeItem right text-center">
                        all
                    </div>                          
                </div>                      
            </li>                                               
            <li id="list_6">                    
                <div class="listItemContents">                                                      
                    <div class="moduleTypeItem left">
                        <a href="?file=Administration/navigation/index.cfm&deleteModule=6" class="deleteRow"><img src="common/images/icons/shadowed/cross-circle.png" alt="Delete Help" width="16" height="16" border="0"  class="icon rightspace" /></a>
                    </div>                                  
                    <div class="moduleTypeItem center text-center">
                        <a href="?file=Administration/navigation/index.cfm&id=6">Help</a>
                    </div>                                  
                    <div class="moduleTypeItem right text-center">
                        all
                    </div>                          
                </div>                      
            </li>                                   
        </ol>
    </div>
</div>

および関連するcss：

html, body {
    height:100%
}

body {
    margin: 0px;
    font-size: 12px;
    font-family: Arial;
    font-family: Arial, Verdana, Univers;
    background-color: #f0eff0;
}
ol {
    border: 0 solid #aeaeae;
    border-width: 0;
    margin: 0;
    padding: 0;
    padding-left: 30px;
}
ol.sortable, ol.sortable ol {
    margin: 0 0 0 25px;
    padding: 0;
    list-style-type: none;
}
ol.sortable {
    margin: 4em 0;
}
.sortable li {
    margin: 0 0 0 0;
    padding: 0;
}
.sortable li div  {
    border: 0 solid #aeaeae;
    border-width: 1px;
    padding: 0px;
    margin: 0;
    cursor: move;
}
div.moduleTypeDiv {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 12px;
    width:100%;
}
div.moduleTypeHeader {
    border:1px solid #6d6d6d;
    padding: 6px;
}
div.moduleTypeHeader {
    background: #336699 url(../images/table_header_highlight.png) repeat-x bottom;
    font-weight:bold;
    color: #ffffff;
}
div.moduleTypeHeader a {
    color: #ffffff;
}
.left_content{
    width:48%;
    float: left;
}
.moduleTypeContent{
    position:relative;
    top: -50px;
}
.moduleTypeHeader{
    position: relative;
    bottom: -48px;
}
.legendItem.left, .moduleTypeItem.left{
    float: left;
    width: 18px;
    padding: 5px;
    border:0px ;
    border-right: 1px solid #aeaeae;
}
.legendItem.center, .moduleTypeItem.center {        
    padding:6px;    
    border:0px ;    
}
.legendItem.right, .moduleTypeItem.right {  
    position: relative;
    top: -25px;
    float: right;
    width: 100px;
    padding:6px;
    width:50px;
    border:0px ;
    border-left: 1px solid #aeaeae;
}
.listItemContents {
    position:relative;
}
.text-center { text-align:center; }

ありがとう！

ps私はフィドルを作成しました：http：//jsfiddle.net/earachefl/c2bcc/

4

1 に答える 1

1

右側をフローティングすることで、右側の「列」要素に非常に奇妙な配置を行っていますが、実際にはそれらが属する行にスペースを残していないため、行を押し下げて相対配置を使用するのは「ハック」です。必要な場所に戻します。したがって、最初の行には、テキストを左に押して中央に表示される項目はありません。

簡単な解決策：テーブルを使用します。あなたのコードは、「レイアウトにテーブルを使用しない」というルールを誤解しているため、悪い「CSSハッキング」の典型的な例です。テーブルをご利用ください。お願いします。

編集： あなたはテーブルを使うことができないので、あなたがしなければならないことはここにあります：

  • 「右」列をリスト項目の最初の位置に移動します
  • 中央の柱に、右の柱が収まるように十分な幅の右マージンを与えます。（63px=50px幅+2*6pxパディング+1px左ボーダー）

http://jsfiddle.net/Se87U/1/

于 2011-08-25T13:14:24.823 に答える