Question

情况：我有几个清单;在这些列表的每一个中，第一个li中的文本位于中心的右侧，而不是像下面的li元素那样恰好位于中心。在以下示例中，第二行文本（“站点地图”）不居中。有什么想法吗？

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; }

谢谢！

P.S。我创造了一个小提琴：http://jsfiddle.net/earachefl/c2bcc/

Answer 1

你在右边的“列”元素上进行了一些非常奇怪的定位，但是在它们所属的行上没有为它们留下任何空间，所以它们被推下来然后使用相对定位是将他们“劈开”回到你想要的地方。因此，第一行中没有任何项目会将文本向左推，以使其显示为居中。

简单的解决方案：使用表格。您的代码是糟糕的“CSS黑客”的一个主要示例，因为误解了“不要使用表格进行布局”规则。请用一张桌子。请。

修改由于您无法使用表格，因此您必须执行以下操作：

将“右侧”列移至列表项
中的第一个位置
为中间列提供足够宽的右边距，使右列适合它。（63px = 50px宽度+ 2 * 6px填充+ 1px左边框）

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

css文本对齐/定位问题

1 个答案: