Невозможно переместить текст с полем

Question

Невозможно переместить текст с полем

0

Я пытался скомпоновать свой первый шаблон, и я столкнулся с проблемой. Я пытаюсь переместить ссылку (home/") с функцией поля, но она не перемещается. Но в других текстах я могу перемещаться с запасом. Так почему я не могу переместить некоторые тексты с функцией маркера?

body {
    margin:0;
    padding:0;
}

#header {
    background-color:#353C3E;
    height:80px;
    width:100%;
    position:relative;
}

.header_content {
    width:946px;
    position:relative;
    margin:0 auto;
    padding:0;
}

.header_content p:nth-child(2) {
    margin:-63px 0 0 100px;
    position:relative;
    font-size:24px;
    color:#FFF;
    font-family:Montserrat;
}

.header_content p:nth-child(3) {
    margin:-21px 0 0 564px;
    position:relative;
    font-size:13px;
    color:#959595;
    font-family:Montserrat;
}

#header2 {
    width:100%;
    background-color:#40494C;
    height:62px;
}

.header_content a {
    font-family:Montserrat;
    color:#717B7E;
    font-size:13px;
    margin-top:10px;
    text-decoration:none;
}

.header_content a:hover {
    color:#FFF;
    font-size:13px;
    text-decoration:none;
}

@font-face {
    font-family:Montserrat;
    src: url('Montserrat-Regular.ttf');
}

<!DOCTYPE html>
<html>
    <head>
        <title>Webpage</title>
        <link type="text/css" rel="stylesheet" href="/stylesheet.css"/>
    </head>
    <body>
        <div id="header">
            <div class="header_content">
                <img src="img/near-logo.png"/>
                <p>ILLUSTRATE.</p>
                <p><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
            </div>
        </div>
        <div id="header2">
            <div class="header_content">
                <div class="link">
                    <a href="">HOME/</a>
                </div>
            </div>
        </div>
    </body>
</html>

Edvinas 21 март 2014, в 15:54

Источник

Теги:

html

css

position

padding

margin

3 ответа

Ещё вопросы

j08691 · Answer 1 · 2014-03-21T11-25-00.000Z

Встроенные элементы не имеют высоты, поэтому вы можете изменить отображение из строки в встроенный блок, чтобы можно было использовать высоту или верхний край вашего окна:

.header_content a {
    font-family:Montserrat;
    color:#717B7E;
    font-size:13px;
    margin-top:10px;
    text-decoration:none;
    display:inline-block;
}

Пример jsFiddle

обратите внимание, что ie6 / 7 не нравится display:inline-block; для них я использую zoom: 1; и *display: inline;

kei · Answer 2 · 2014-03-21T12-42-00.000Z

Поскольку `HOME` является `inline` элементом.

Согласно спецификации CSS2.1:

8.3 Свойства полей: "margin-top", "margin-right", "margin-bottom", "margin-left" и "margin"

Свойства поля определяют ширину области поля поля. Условное свойство "margin" устанавливает маржу для всех четырех сторон, в то время как другие свойства поля только устанавливают соответствующую сторону. Эти свойства применимы ко всем элементам, но вертикальные поля не будут влиять на незаменяемые встроенные элементы.

Если вы хотите, чтобы верхний (и нижний) край был применен, измените его на inline-block или используйте position:relative с top набором.

LOTUSMS · Answer 3 · 2014-03-21T11-22-00.000Z

Прежде всего, если это меню, которое вы используете, я бы использовал UL, а не DIV. Поэтому я немного структурировал это, чтобы посмотреть, нравится ли вам это

ul.header_content {
   display:block;
   padding-top:15px;
   padding-left:15px;
}
ul.header_content li {
   display:inline;
   margin:0px 10px;
}

Вот ДЕМО

Невозможно переместить текст с полем

3 ответа

Поскольку HOME является inline элементом.

Ещё вопросы

Поскольку `HOME` является `inline` элементом.