Question

I have a ul with 2 li inside, and i'd like my ul to fit a div. So the 2 li will take 100% height of the div and 50% width of the div each.

FinishViewController

I tried a lot of things but I can't get the 2 li to fit perfectly the div.

Answer 1

试试这个移除padding上的#menu-list，因为#menu-list li向右浮动，在clearfix上使用#menu-list。

CSS

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

#rightpart {
  position: relative;
    float: right;
    width: 40%;
  }

 #menu-list::after{
   content:"";
   display:table;
   clear:both;
 }


#menu-wrapper {
    background-color: #3a3d40;
    width: 100%;
    z-index: 1000;
}


#menu-list {
    height: 100%;
    list-style: none;
    list-style-type: none;
    font-weight: normal;
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0;
  padding:0;
}

#menu-list li {
    width: 50%;
    height: 100%;
    float: right;
}


#menu-list a {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    color: #d4d4d4;
    -webkit-transition:all 200ms ease-in;
    -o-transition:all 200ms ease-in;
    -moz-transition:all 200ms ease-in;
}

#menu-wrapper ul li.active a, #menu-wrapper ul li a:hover, #menu-wrapper ul li a.selected {
    color: #86acc4;
    background-color: red;
}

HTML

<div id='rightpart'>
        <div id='menu-wrapper'>
            <ul id='menu-list'>
                <li><a>Playlists</a></li>
                <li><a>Playlists</a></li>
            </ul>
        </div>
    </div>

Link For Reference

Make a ul element fit a div

1 个答案: