css 메뉴 분할


안녕하세요.

기초적인 CSS 같은데 제가 문외한이라 도움을 요청드립니다.

아래 메뉴바 보시면 메뉴 1과 메뉴2가 일정한 크기로 왼쪽으로 쏠려 있는데요

메뉴1과 메뉴2를 50% 나누어 보이게 하려면 어디를 수정해야 하는지요.. 전체크기(100%)에서 50%는 메뉴1 나머지 50%는 메뉴 2로 하고 싶습니다.

도움 부탁드립니다.

이미지

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">메뉴1</a></li>
  <li><a href="#news">메뉴2</a></li>

</ul>

</body>
</html>

조회수 136


1 답변


좋아요
1
싫어요
채택취소하기

ul의 width를 100%로 가득채우고 display를 table로 하고,

li에서 float:left를 대신에 display: table-cell를 지정하시면,

각 li들이 table 형식에 맞게 보여집니다.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;

    width: 100%;
    display: table;
}

li {
    border-right:1px solid #bbb;

    display: table-cell;
}

  • 2016년 09월 12일에 작성됨
    프론트앤드, 임베디드 초보개발자입니다

  • 친절한 설명 감사드립니다.    Hyun Ki Kim   2016.9.12 16:20     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close