-
display:inline-block; [TIP]기타 2022. 8. 4. 14:56반응형
가끔 한줄에
넓이 250px로 고정시켜서 여러개를 나열해야할 경우가 생긴다.
이때 display:inline을 주면 span처럼 한줄에 붙여지는 걸 볼 수 있지만 내가 원하는 결과물이 아니다.
이때 250px만큼만 확보를 하고 붙이고 싶을때 display:inline-block을 사용하면 된다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> li { width:500px; border: 5px solid #bcbcbc; padding: 50px; } </style> </head> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> function test1() { console.log("inline 성공적으로 실행됨") var test1 = document.getElementById("test1"); test1.style.display = "inline"; var test2 = document.getElementById("test2"); test2.style.display = "inline"; } function test2() { console.log("inline-block 성공적으로 실행됨") var test1 = document.getElementById("test1"); test1.style.display = "inline-block"; var test2 = document.getElementById("test2"); test2.style.display = "inline-block"; } </script> <body> <span id="test1" style="width:500px"> <input type="checkbox" checked></input> 안녕하세요 <input style="width:100px" ></input> <input type="checkbox" checked></input> 안녕하세요 <input style="width:100px" ></input> </span> <span id="test2" style="width:500px"> <input type="checkbox" checked></input> 안녕하세요 <input style="width:100px" ></input> <input type="checkbox" checked></input> 안녕하세요 <input style="width:100px" ></input> </span> <div><button onclick="test1()">inline</button></div> <div><button onclick="test2()">inline-block</button></div> </body> </html>
반응형'기타' 카테고리의 다른 글
Uncaught DOMException : Blocked a frame with origin "도메인" from accessing a cross-origin frame [오류 해결] (0) 2022.08.26 Jetty, JSP 서버 반영 [TIP] (0) 2022.08.03 style태그 HTML{} [기술TIP] (0) 2022.08.03 WAR 파일 (0) 2022.07.27 Putty (0) 2022.07.25