-html5-
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset=EUC-KR>
<link href="upload.css" rel="stylesheet" type="text/css">
<title>Upload</title>
</head>
<body>
<span id="categoryform">
<select>
<option>카테고리</option>
<option>스포츠</option>
<option>게임</option>
</select>
</span>
<span><input type="text" name="title" placeholder="제목"></span>
</div>
</div>
</body>
</html>
-css-
#uploadform {
position: absolute;
top: 50%;
left: 50%;
margin-top: -10%;
margin-left: -25%;
width: 1000px;
height: 1000px;
}
#categoryform select {
background: transparent;
width: 150px;
height: 30px;
font-size: 15px;
line-height: 1;
padding: 4px;
border: 0;
background-webkit-appearance: none;
}
#categoryform {
display:inline-block;
width: 150px;
height: 30px;
overflow: hidden;
background: #ddd;
border: 1px solid #ccc;
}
#titleform input {
width: 80%;
height: 30px;
font-size: 15px;
margin-left:5px;
}
위의 코딩처럼 span 두개를 inline-block 처리해서 width조정을 가능하게 만든다음
두개의 span을 한줄에 놓으려고 했습니다.
그런데 다음처럼 약간 어긋나서 나오네요..
혹시 왜 그런지 아시는 분 계시나요?
만약 이렇게 사용할수 없다면
이 두개의 블록을 그대로 한줄에 놓을수 있는 방법은 없나요?
본인삭제금지
글쓰기