cssブロック要素のdisplay属性inline-blockの応用
21014 ワード
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/common/jquery-1.9.1.min.js" type="text/javascript"></script>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
background:url(../img/leftbj.gif) repeat-y;
}
ul li{
list-style: none;
}
#leftDiv{
width: 100%;
overflow:hidden;
display: block;
height: 100%;
margin-top: 32px;
}
#leftDiv ul li span{
font-size: 14px;
background: url(../img/navbj01.jpg) no-repeat;
height: 28px;
display: inline-block;
line-height: 28px;
width: 100%;
padding-left: 25px;
color:white;
}
#leftDiv ul li{
margin-left: -40px;
width: 207px;
}
#leftDiv ul li ul li{
line-height: 28px;
height: 28px;
width: 207px;
background-color: #336f9c;
border-bottom: 1px solid #4183b4;
}
#leftDiv ul li ul li a{
text-decoration:none;
cursor:pointer;
color: white;
font-size: 13px;
padding-left: 50px;
}
#leftDiv ul li ul li a:hover{
text-decoration:underline;
}
</style>
<script type="text/javascript">
$(function(){
$("#leftDiv>ul>li>span").click(function(){
$(this).siblings("ul").toggle();
});
});
</script>
</head>
<body>
<div id="leftDiv">
<ul>
<li>
<span> </span>
<ul>
<li><a href="customer/sum.do" target="mainFrame"> </a></li>
</ul>
</li>
<li>
<span> </span>
<ul>
<li><a href="admin/list.do" target="mainFrame"> </a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>上記では、span要素の行の高さ、高さ、幅、displayのinline-blockを設定することで、tableレイアウトに依存することなく、レイアウト内の位置合わせ(水平または垂直)に役立ちます.