<!DOCTYPE html>
<html>
<head>
<title>카푸치노 만들기</title>
<style>
div {
display :inline-block;
border : 3px solid brown;
width :22em;
}
ol {
list-style-type : none;
}
li {
position : relative;
right : 15px;
}
span {
color : olivedrab;
padding : 10px;
font-size : 3em;
}
p {
display : inline-block;
width: 15em;
}
</style>
</head>
<body>
<h3><b>
카푸치노
</b>
</h3>
<hr>
<div>
<b>
<h3 style = "text-align : center;">
카푸치노 만드는 순서
</h3>
</b>
<ol id=“style”>
<li><span><b>1.</b></span>
<p>
에스프레소를 추출한다. 반드시 에스프레소 콩을 사용해야 제맛이 난다.
</p>
</li>
<li><span><b>2.</b></span>
<p>
적당한 용기에 우유를 넣어 중탕을 하거나 끓기 직전까지 데운다.
</p></li>
<li><span><b>3.</b></span>
<p>
몇초간 저어 충분히 거품을 낸다. 거품이 충분하지 않으면 풍미가 떨어진다.
</p></li>
<li><span><b>4.</b></span>
<p>
컵에 계피 막대를 꽂고 커피를 부은후 우유 거품을 붓는다. 휘핑크림을 얹고 계피가루를 뿌린다.
</p></li>
</ol>
</div>
</body>
</html>
첨부 파일에서 1. 옆에 바로 글씨가 나오는게 아니라 약간 올라가서 나오는데 해결방법이 있나요?
만드는 방법이 워낙 다양할 수 있는데 질문한 분의 코드상에서
옆에 바로 글씨가 나오는게 아니라 약간 올라가서 나오게 하기 위해서는
1) <span>태그로 둘러쌓인 숫자를 절대 위치로 만들고,
2) <span>의 패팅을 0으로만들고
3) 뒤에 따라오는 <p> 부분의 왼쪽 마진을 크게 주어 숫자 뒤에서 부터 텍스트를 출력하면 됩니다.
다음과 같이 3부분에 손을 봐보았습니다.
<!DOCTYPE html>
<html>
<head>
<title>카푸치노 만들기</title>
<style>
div {
display :inline-block;
border : 3px solid brown;
width :22em;
}
ol {
list-style-type : none;
}
li {
position : relative;
right : 15px;
}
span {
position:absolute; /* 이부분 추가(1) */
color : olivedrab;
/*padding : 10px;*/ /* 이부분 삭제(2) */
font-size : 3em;
}
p {
display : inline-block;
width: 15em;
padding-left:50px; /*이 부분 추가 (3)*/
}
</style>
</head>
<body>
<h3><b>
카푸치노
</b>
</h3>
<hr>
<div>
<b>
<h3 style = "text-align : center;">
카푸치노 만드는 순서
</h3>
</b>
<ol id=“style”>
<li><span><b>1.</b></span>
<p>
에스프레소를 추출한다. 반드시 에스프레소 콩을 사용해야 제맛이 난다.
</p>
</li>
<li><span><b>2.</b></span>
<p>
적당한 용기에 우유를 넣어 중탕을 하거나 끓기 직전까지 데운다.
</p></li>
<li><span><b>3.</b></span>
<p>
몇초간 저어 충분히 거품을 낸다. 거품이 충분하지 않으면 풍미가 떨어진다.
</p></li>
<li><span><b>4.</b></span>
<p>
컵에 계피 막대를 꽂고 커피를 부은후 우유 거품을 붓는다. 휘핑크림을 얹고 계피가루를 뿌린다.
</p></li>
</ol>
</div>
</body>
</html>