간단한 javascript 질문드립니다.
본문
이전에도 많이 사용했던 코드 같은데 갑자기 생각이 안납니다.ㅠㅠ
float left 로 여러개의 메뉴를 만들고 지정된 폭이 넘치면 안보이게 overflow: hidden; 처리하는 예제입니다.
float가 overflow:hidden; 을 초기화하는 것은 알고 있는데 다른 방법도 있을것같습니다.
이런 경우에 어떻게 구현하십니까?
div 안쪽폭을 1000px 처럼 늘리면 편법으로는 되긴하지만 다른 방법이 있을것 같은데
토통 기억이 안납니다. 2시간동안 찾다가 포기했습니다.
도움 요청 드립니다..
소스코드
<style>
.wrap {
overflow:hidden;
width:200px;
border:2px solid red;
white-space: nowrap;
overflow: hidden;
}
ul{
list-style-type:none;
margin:0; padding:0;
/* width:1000px; <-- 이거 사용하지 않고 처리 */
}
.two {
width:1000px /* 이거 사용하지 않고 처리 */
}
li{
float:left;
display: inline-block;
padding:5px;
}
</style>
안되는 부분,..,
<div class='wrap'>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
<BR>
편법으로 되는 부분 ul 의 폭을 1000으로 늘림..
<div class='wrap'>
<ul class='two'>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
답변 3
혹시
display: table-cell;
이걸 찾으시는건가요?
display:flex; 이었군요.. 연휴 동안 너무 놀아서인지 제머리가 이상해졌나 봅니다.
두분께 감사드립니다. 새해 복많이 받으세요..^^
답변을 작성하시기 전에 로그인 해주세요.
