使ul元素適合div

-1

我有一個ul裏面有2裏，我想我的UL適合div。所以2 li將分別佔據div的100％高度和div的50％寬度。使ul元素適合div

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

我嘗試了很多東西，但我不能讓二里到伏貼股利。

來源

2017-08-30 Victofu

_ 「我嘗試了很多東西」 _請告訴我們你試過 – j08691

你可以創建你的問題的例子嗎？ https://jsfiddle.net/3x5Lzmwj/ – marekpw

2'播放列表'lis應該適合黑暗的div https://jsfiddle.net/3x5Lzmwj/8/ – Victofu

嘗試這個上#menu-list刪除padding，因爲#menu-list li浮動到右，上#menu-list使用clearfix。

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

來源

2017-08-31 02:06:36

這是完美的，非常感謝！ – Victofu

使ul元素適合div

回答

相關問題