Как мне отформатировать это с помощью CSS, а не таблиц? - PullRequest
Новая
       24

Как мне отформатировать это с помощью CSS, а не таблиц?

1 голос
/ 27 февраля 2011 
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li
{
float:left;
padding-right:5px;
color:#333333;
font-size:13px;
font-family:arial,sans-serif;
align:center;
}

<ul>
<form action="login.php" method="post">
<li><input name="search" type="text" /></li>
<li><input value="Search" type="submit" /></li>
<li><a href="register.html">Register</a></li>
<li><a href="login.html">Login</a></li>
</form>
</ul>

У меня есть этот код для создания горизонтальной панели с окном поиска, кнопкой поиска, регистрационной ссылкой и ссылкой для входа.Тем не менее, я хотел бы, чтобы все элементы были в центре, как горизонтальная полоса YouTube.В настоящее время их позиции Y начинаются в верхней части экрана, и это выглядит плохо.Если бы я использовал таблицы HTML, я бы просто центрировал каждое значение td в таблице, но вместо этого я пытаюсь правильно запрограммировать его с помощью CSS.

Я довольно новичок в веб-программировании и CSS.

PS: Как YouTube создает такие причудливые разделители между ссылками "Просмотр" и "Загрузка"?Я посмотрел в источнике и ничего не нашел.= (

Ответы [ 2 ]

0 голосов
/ 27 февраля 2011

Я проверил это, он прекрасно работает и эффективен в размере. 

<html>
<body>

<form action="login.php" method="post">
<input name="search" type="text" />
<input value="Search" type="submit" />
<a href="register.html">Register</a>
<a href="login.html">Login</a>
</form>

</body>
</html>
0 голосов
/ 27 февраля 2011

Относительно бара, у них есть этот стиль на их гиперссылках: 

#masthead-utility a {
    border-left: 1px solid #CCCCCC;
    padding: 0.1em 0.8em;
    white-space: nowrap;
}

Обратите внимание на границу слева. Firebug - отличный компаньон, когда дело доходит до того, как люди делают что-то на своих сайтах, особенно когда вы помогаете выстраивать вещи на своих сайтах с помощью редактирования в реальном времени.

...