Вертикальное выравнивание в теге <a..> при display:block.

mozart · October 10, 2008

Проблема следующая: есть код:

#but {width:400px; height:100px;}
#but a {display:block; float:left; width:100px; height:100px; color:#4088b8;}
#but a:hover {color:#131313; background:url(i/image.gif) center bottom no-repeate;}

<div id="but">
 <a href="#">linkname</a>
 <a href="#">linkname</a>
 <a href="#">linkname</a>
 <a href="#">linkname</a>
</div>

проблема: linkname прижимается к верхней границе блока, а надо что бы был внизу. Пробвал применять padding со нужными значениями, но в этом случае увеличивается высота блока и соответственно толкает вниз все что под ним. Также пробовал разные варианты display - тоже ничего. Vertical-align - вообще мертво.. Что делать?

klierik · October 10, 2008

при данной верстке:

#but {position: relative;}
  #but a {display:block; width:100px; height:100px; color:#4088b8; position: absolute; bottom: 0; left: 0;}
	#but a.lnk1 {}
	#but a.lnk2 {left: 100px;}
	#but a.lnk3 {left: 200px;}
	#but a.lnk4 {left: 300px;}
  #but a:hover {color:#131313; background:url(i/image.gif) center bottom no-repeate;}

<div id="but">
	<a class="lnk1" href="#">linkname</a>
	<a class="lnk2" href="#">linkname</a>
	<a class="lnk3" href="#">linkname</a>
	<a class="lnk4" href="#">linkname</a>
</div>

но я бы рекомендовал идти следующим путем:

<!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">
		div.menu-case {position:relative;}
			div.menu-case ul {position: absolute; left: 0; bottom:0; overflow:hidden; _zoom: 1;}
				div.menu-case li {float:left;}
					div.menu-case a {display:block; width:100px; height:100px; color:#4088b8;}
					div.menu-case a:hover {color:#131313; background:url(i/image.gif) center bottom no-repeate;}
	</style>

</head>

<body>

	<div class="menu-case">
		<ul>
			<li><a href="#">linkname</a></li>
			<li><a href="#">linkname</a></li>
			<li><a href="#">linkname</a></li>
			<li><a href="#">linkname</a></li>
		</ul>
	</div>

</body>
</html>

Sign In

Вертикальное выравнивание в теге <a..> при display:block.

Question

mozart

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information