css text-align / positioning question - PullRequest
Новая
       11

css text-align / positioning question

1 голос
/ 25 августа 2011

Ситуация: у меня несколько списков; в каждом из этих списков текст внутри первого 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/

1 Ответ

1 голос
/ 25 августа 2011

Вы делаете действительно странное позиционирование по правым элементам «столбца», перемещая правое, но фактически не оставляя им места для них в строке, которой они принадлежат, поэтому они выталкиваются вниз на строку, а затем используется относительное позиционирование.«взломать» их обратно, где вы хотите их.И поэтому в первой строке нет элемента, который бы сдвинул текст влево, чтобы он выглядел по центру.

Простое решение: используйте таблицу.Ваш код является ярким примером плохого «взлома CSS» из-за неправильного понимания правила «Не используйте таблицы для разметки».Пожалуйста, используйте стол.Пожалуйста.

РЕДАКТИРОВАТЬ: Поскольку вы не можете использовать таблицу, вот что вам нужно сделать:

  • Переместите столбец «вправо» на первыйпозиция в элементе списка
  • Дайте центральному столбцу правильное поле, достаточно широкое для правого столбца, чтобы оно соответствовало ему.(63 пикселя = 50 пикселей ширины + 2 * 6 пикселей отступа + 1 пиксель слева)

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

...