가능하면 web 표준에 부합하게 만들려고 ul 과 li 를 이용하려고 하는데요,
게시물 번호가 표시되는 부분은 indent 없이 나타나게 하고 싶습니다.
(제목부분은 당연히 indent 가 되어야 하고요.)
Code: Select all
<?xml version="1.0" encoding="euc-kr"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>리스트 테스트</title>
<style type="text/css">
<!--
ul {
list-style-type : none ;
clear : both ;
}
li {
float : clear ;
clear : both ;
vertical-align : center ;
border : 1px solid black ;
display : block ;
}
div.number {
width : 50px ;
background : #DDDDDD ;
/* display : inline ; */
float : left ;
}
div.title {
display : inline ;
width : 600px ;
background : blue ;
color : white ;
float : left ;
}
div.author {
float : right ;
width : 100px ;
background : yellow ;
}
div.date {
float : right ;
}
-->
</style>
</head>
<body>
<ul>
<li>
<div class="number">1</div>
<div class="title">질문</div>
<div class="date">시간</div>
<div class="author">사람1</div>
<div class="dummy"></div>
<ul>
<li>
<div class="number">1-1</div>
<div class="title">답글1</div>
<div class="date">시간</div>
<div class="author">사람2</div>
<div class="dummy"></div>
<ul>
<li>
<div class="number">1-1-1</div>
<div class="title">답글에 대한 답글</div>
<div class="date">시간</div>
<div class="author">사람3</div>
<div class="dummy"></div>
</li>
</ul>
</li>
<li>
<div class="number">1-2</div>
<div class="title">답글2</div>
<div class="date">시간</div>
<div class="author">사람2</div>
<div class="dummy"></div>
</li>
</ul>
</li>
</ul>
</body>
</html>
게시물 번호 문제는 어떻게 해야 할지 모르겠네요.
그리고 각 항목의 끝에 <div class="dummy"></div> 를 넣었는데
이게 없을 경우 레이아웃이 엉망이 되버립니다. 해결할 방법이 없을까요??
그리고 제가 해놓은 방식이 올바른 걸까요???
