Позиционирование css - PullRequest
       1

Позиционирование css

0 голосов
/ 08 июля 2011
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<style type="text/css">
table{

text-align:centre;
left:200px;
right:200px;
}
.karan
{
margin-top: 280px;
}
</style>
</head>
<body>
<a class="karan" href="#">asd</a>
<table>
<tr><th>haha</th><th>hoho</th></tr>
<tr><td>asdasd</td><td>asdasdasdas</td></tr></table>
</body></html> 

Я ожидаю, что результатом будет ссылка с пробелом в 280 пикселей сверху и таблица с пробелом около 200 пикселей с правой стороны экрана браузера, но результат будет таким же, как если бы был нет тегов стиля, я ожидаю что-то не так. Что работает left: right: свойство на то время?

Ответы [ 3 ]

2 голосов
/ 08 июля 2011

Якорные теги - это то, что называется встроенными элементами, и поэтому вы не можете использовать margin-top для них.Вы можете обернуть тег привязки в div и применить к нему атрибут margin-top.

Что касается таблицы, то вам нужны поля по обе стороны от 200px, которые вы не можете применить, просто используя левуюи правильно.

Следующий код должен работать:

table {
    text-align:center;
    margin-left:200px;
    margin-right:200px;
}

.karan {
    margin-top: 280px;
}


<div class="karan"><a href="#">asd</a></div>
<table>
    <tr><th>haha</th><th>hoho</th></tr>
    <tr><td>asdasd</td><td>asdasdasdas</td></tr>
</table>
0 голосов
/ 08 июля 2011
Свойства

top, right, bottom и left - это свойства, которые используются для element shifting, что означает, что они хотят вытолкнуть элемент с края родительского элемента.Но они не работают для элемента, который statically расположен.position: static; - это набор по умолчанию для любого элемента, если не указано иное.Чтобы включить смещение элементов, т. Е. Чтобы можно было использовать свойства top, right, bottom и left, необходимо расположить элемент relatively, absolutely или fixed.Используйте этот CSS:

.karan
{
    position: relative;
    top: 200px;
}

table
{
   position: absolute;
   top: 0px;
   right: 100px;
}
0 голосов
/ 08 июля 2011

Вам необходимо присвоить значение позиции таблице, также неверно введено значение выравнивания текста:

table {
  text-align:center;
  left:200px;
  postion: absolute;
}

Кроме того, если вы назначаете правое и левое или верхнее и нижнее значения, оно служит для расширения поля до этих координат.

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