Проблема с позиционированием ссылок CSS - PullRequest
0 голосов
/ 17 февраля 2010

У меня проблема с моим CSS при работе в Firefox. Это должно быть довольно просто. Все работает нормально, за исключением того, что я не могу выровнять ссылки в заголовке вправо (цвет изменится так же, как и любые другие модификации, кроме выравнивания). Единственный способ, которым я могу это сделать, - это разместить его правильно, но это меняет порядок ссылок и кажется неправильным. Может быть, есть лучший способ справиться со ссылками в шапке, чем тот промежуток, который я использовал? У меня будет еще несколько ссылок в заголовке в другой позиции, поэтому мне нужно указать, на какие ссылки я как-то ссылаюсь ...

Посмотрите на код ниже:

Сначала HTML:

"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import "layout2.css";</style>
</head>
<body>
<div id="all">
<div id="head">
<span class="headlinks">
<a href="#">Logout</a>
</span>
</div>
<div id="menu">
</div>

<div id="content">

</div>
</div>
</body>
</html>"

Теперь CSS:

/ * Layout2.css * /

#all {
    border: none;
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
}

.headlinks a {
    text-align:right;
        color:#ffffff;
}

#head {
    border: none;
    position: absolute;
    left: 0%;
    width: 100%;
    height: 10%;
    background-color:#336699;
}

#head h1 {
    margin-top: 1%;
    text-align:right;
}

#menu {
    border: none;
    position: absolute;
    left: 1%;
    top: 12%;
    width: 20%;
    height: 90%;
    padding-left: 1%;
    padding-right: 1%;
    background-color:#b1b2a3;
}

#content{
    border: none;
    position: absolute;
    left: 25%;
    top: 12%;
    width: 72%;
    height: 90%;
    padding-left: 1%;
    padding-right: 1%;
    background-color: #eeeeee;
}

Спасибо!

Ответы [ 3 ]

0 голосов
/ 17 февраля 2010

Вы хотите:

#head { text-align: right; }

Головка div является блочным элементом со 100% шириной. Headlinks - это встроенный элемент, содержащий одну ссылку. text-align используется для элемента блока, его содержимого, а не для встроенных элементов, чтобы указать, как поместить их в родительский элемент.

Альтернативный подход состоит в том, чтобы сделать заголовки элементом уровня блока:

span.headlinks { display: block; text-align: right; }

Что использовать, зависит от того, чего вы хотите достичь.

0 голосов
/ 17 февраля 2010

Попробуйте поместить text-align: right в div 'head', а не в span 'headlinks'. Этот стиль применяется к элементам уровня блока, таким как div, а не к встроенным элементам, таким как span.

0 голосов
/ 17 февраля 2010

Измените <span class="headlinks> на <div> и добавьте text-align: right в его стиль CSS.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...