Почему мои ссылки друг на друга?

Я разрабатываю раздел заголовка веб-проекта, и я хочу, чтобы на нем были застряли ссылки.Почему мои ссылки друг на друга?

Вот HTML:

<div id="header_section"> 

    <a class="toplink" href="#">Contact</a> 
    <a class="toplink" href="#">Register</a> 
    <a class="toplink" href="#">Staff Login</a> 
    <a class="toplink" href="#">Home</a> 

    <h1 class="welsh"> SAMPLE </h1> 
    <h1> SAMPLE </h1> 
</div>

И CSS:

a.toplink 
{ 
    font-family:  ‘Arial Narrow’, sans-serif; 
    font-size:   12px; 
    font-weight:  bold; 

    position:   fixed; 
    top:    0px; 
    right:    10px; 
    margin-right:  100px; 

    padding:   6px; 
    width:    100px; 
    text-align:   center; 

    color:    black; 
    background-color: #f3f3f3; 
}

Это переехал ссылки, где я хочу их, но все они укладываются друг на, когда я хочу, чтобы отобразить их рядом друг с другом. Единственное отображаемое сообщение - «Дом», а остальное внизу. Есть идеи?

источник

2012-06-22 WebDevDanno

Добавить свой код в jsfiddle.net –

Да. не могли бы вы дать нам демо-версию jsfiddle.net? –

wht точно вам нужно .......... –

добавить

div#header_section { 
    display:inline; 
}

или

div#header_section a { 
    display:inline; 
}

один из них должен работать.

источник

2012-06-22 11:54:12 poepje

Просто Изменить

position: fixed

Для

position:related

источник

2012-06-22 11:54:26 Ajai

Вы имели в виду * положение: относительное *, право? – McGarnagle

Эй вы можете изменить некоторые код в HTML и CSS часть

, как, как это

Css

.toplink
{ позиция: постоянная; верх: 0px; margin-right: 100px; прокладка: 6px; правый: 0; ширина: 700 пикселей; text-align: center; дисплей: блок; }

.toplink li{ 
float:left; 
} 
.toplink a { 
font-family:  ‘Arial Narrow’, sans-serif; 
    font-size:   12px; 
    font-weight:  bold; 
    color:    black; 
    margin-left:10px; 
    background-color: #f3f3f3; 
    display:block; 

}

HTML

<div id="header_section"> 

<ul class="toplink"> 
    <li> <a href="#">Contact</a></li> 
    <li> <a href="#">Register</a></li> 
    <li> <a href="#">Staff Login</a> </li> 
    <li><a href="#">Home</a> </li> 
</ul> 

    <h1 class="welsh"> SAMPLE </h1> 
    <h1> SAMPLE </h1> 
</div>

Живая демо http://jsfiddle.net/n9UKF/2/

источник

2012-06-22 11:59:06

Ваши стили говорят, взять все ссылки и расположите его 0px из верхней и 10px DROM права и они будут позиции в одном месте ,

, чтобы исключить его обертку ссылками по div и установить для него не ссылки.

<div id="header_section"> 
    <div class="links"> 
     <a class="toplink" href="#">Contact</a> 
     <a class="toplink" href="#">Register</a> 
     <a class="toplink" href="#">Staff Login</a> 
     <a class="toplink" href="#">Home</a> 
    </div>  

    <h1 class="welsh"> SAMPLE </h1> 
    <h1> SAMPLE </h1> 
</div> 

.links { 
    position: fixed; 
    top: 0px; 
    right: 10px; 
} 

a.toplink 
{ 
    font-family:‘Arial Narrow’, sans-serif; 
    font-size:12px; 
    font-weight:bold; 
    margin-right:100px; 

    padding:6px; 
    width:100px; 
    text-align:center; 

    color:black; 
    background-color:#f3f3f3; 
}

источник

2012-06-22 11:59:22 yarm

Спасибо, приятель, у меня было прозрение, когда я вернулся с обеда, чтобы сделать это, и это было правильно! – WebDevDanno

Не используйте:

position: absolute;

для отдельных звеньев. Это поставит их в том же месте относительно их родителя.

Использование:

float:right;

Demo.

источник

2012-06-22 12:16:50 Mac

Почему мои ссылки друг на друга?

ответ

Смежные вопросы