Выравнивание ul в ячейке таблицы по правому краю

gegmaster · September 15, 2011

Здравствуйте. Помогите пожалуйста выровнять список (пагинацию) по правому краю ячейки. Что я только не делал: text-align: right в теге TD не помогает, пробовал float:right в теге DIV - выравнивает, но не так как надо; пробовал в каждый тег LI ставить float:right - но тогда список переворачивается задом-наперед.

Привожу примерный код (в моем случае LI отображаются в цикле на PHP):


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<table border="1" style="width: 100%; border-collapse: collapse;"><tr>

<td style="border: 1; width:15%;">Что либо</td>
<td style="border: 1; width:15%;">Что либо</td>
<td style="border: 1; width:70%;">
    <ul id="pagination-digg">
            <li class="previous-off">«Previous</li>
            <li class="active">1</li>
            <li><a href="?page=2">2</a></li>
            <li><a href="?page=3">3</a></li>
            <li><a href="?page=4">4</a></li>
            <li><a href="?page=5">5</a></li>
            <li><a href="?page=6">6</a></li>
            <li><a href="?page=7">7</a></li>
            <li class="next"><a href="?page=2">Next »</a></li>
    </ul>
</td>

</tr><table>    
</body>
</html>


ul{border:0; margin:0; padding:0;}

#pagination-digg li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
#pagination-digg a{
border:solid 1px #9aafe5;
margin-right:2px;
}
#pagination-digg .previous-off,
#pagination-digg .next-off {
border:solid 1px #DEDEDE;
color:#888888;
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
#pagination-digg .next a,
#pagination-digg .previous a {
font-weight:bold;
}
#pagination-digg .active{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#pagination-digg a:link,
#pagination-digg a:visited {
color:#0e509e;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#pagination-digg a:hover{
border:solid 1px #0e509e;
}

Edited September 15, 2011 by gegmaster

george75 · September 15, 2011

А если:

<!DOCTYPE html>

<html>

<head>

ul{border:0; margin:0; padding:0;}

ul#pagination-digg {float:right;}

#pagination-digg li{

border:0; margin:0; padding:0;

font-size:11px;

list-style:none;

margin-left:2px;

float: left;

}

#pagination-digg a{

border:solid 1px #9aafe5;

margin-right:2px;

}

#pagination-digg .previous-off,

#pagination-digg .next-off {

border:solid 1px #DEDEDE;

color:#888888;

display:block;

float:left;

font-weight:bold;

margin-right:2px;

padding:3px 4px;

}

#pagination-digg .next a,

#pagination-digg .previous a {

font-weight:bold;

}

#pagination-digg .active{

background:#2e6ab1;

color:#FFFFFF;

font-weight:bold;

display:block;

float:left;

padding:4px 6px;

}

#pagination-digg a:link,

#pagination-digg a:visited {

color:#0e509e;

display:block;

float:left;

padding:3px 6px;

text-decoration:none;

}

#pagination-digg a:hover{

border:solid 1px #0e509e;

}

</style>

</head>

<body>

<li class="previous-off">«Previous</li>

</ul>

</td>

</tr><table>

</body>

</html>

gegmaster · September 15, 2011

Отлично! Помогло, спасибо.

Sign In

Выравнивание ul в ячейке таблицы по правому краю

Question

gegmaster

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

george75

Link to comment

Share on other sites

gegmaster

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information