Дисплей :встроенный не работает
Я довольно новичок в html и css.
Я изучил основы и несколько продвинутых методов, но у меня была проблема со списками в течение длительного времени, и я хотел бы знать, как я могу решить эту проблему.
Вот идея.
Я делаю интернет-магазин, но я хочу избежать позиционирования каждого изображения, текста, ссылки с использованием другого идентификатора.
У меня была эта идея, я бы поместил свой li в div, чтобы таким образом все в моем списке было застряло в этом поле, сделать класс, правильно позиционирующий мой текст, ссылки, изображения, использовать встроенный дисплей :и et voila, я могу создать целую страницу продуктов, используя только класс.
Проблема в том, что встроенный дисплей :не работает.
Я был бы очень признателен, если бы кто-нибудь помог мне в этом.
Это плохой пример, но,вы понимаете принцип.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;}
.nav_button {background-color:purple;width:100px;height:50px;}
.nav_button:hover {background-color:pink;}
.nav_button li {display:inline;} /* Not working ?!? */
.nav_button a {position:relative;color:white;text-decoration:none;top:13px;}
</style>
</head>
<body>
<table style="width:600px;margin:0 auto;">
<tr>
<td>
<ul id="nav_bar">
<div class="nav_button"> <li> <a href="#">Home</a> </li> </div>
<div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div>
<div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div>
<div class="nav_button"> <li> <a href="#">About us</a> </li> </div>
</ul>
</td>
</tr>
</table>
</body>
</html>