設置長度右邊框

我想設置我的菜單中包含的每個選項卡的右邊框的大小，或者強制邊框使菜單的整個垂直長度。設置長度右邊框

<div id="menu"> 
    <ul> 
     <li><a class="lien_menu"> 
       <br>Onglet0 loooooooog</a></li> 
     <li><a class="lien_menu"> 
       <br>Onglet1</a></li> 
    </ul> 
</div>

在此先感謝。

來源

2013-12-17 user3112991

你已經有足夠的時間來看看答案，請參閱說了些什麼，並接受一個答案 –

這很簡單，設置高度上的

#menu ul

和

#menu ul li

至100％。由於#menu有固定的高度，因此li將繼承此高度並拉伸以適合高度，如果現在間距太大，則可能必須調整高度#menu高度。

來源

2013-12-18 02:32:31 jmore009

#menu ul li { 
    display: table-cell; 
    padding: 0px 12px 0px 12px; 
    border-right: 1px solid #278fac; 
    text-shadow: 0 1px 1px #278FAC; 
    height: inherit; 
    text-align: center; 
    max-width: 100px; 
}

採用display: table-cell;作品在這裏:)

來源

2013-12-17 22:03:55

你可以添加一個高度屬性#menu UL李（如高度：60像素;）

#menu ul li { 
    display: inline-block; 
    padding: 0px 12px 0px 12px; 
    border-right: 1px solid #278fac; 
    text-shadow: 0 1px 1px #278FAC; 
    text-align: center; 
    max-width: 100px; 
    height: 60px; 
}

來源

2013-12-17 22:08:57 jesslouko

嘗試CSS3功能：display: flex

http://jsfiddle.net/5FP8R/9/

#menu { 
    width: 100%; 
    background: -moz-linear-gradient(top, #C20017, #C20017); 
    margin-bottom: 10px; 
    border: 0px solid red; 
} 

#menu ul { 
    padding: 7px 10px 5px 10px; 
    margin: 0px; 
    border: 0px solid green; 
    display: flex; /* this is flex-container */ 
    height: 70px; /* control height here */ 
    flex-flow: row nowrap; 
    align-items: stretch; /* stretch items' height to container */ 
    justify-content: center; /* horizontal align to center */ 
} 

#menu ul li { 
    padding: 0px 12px 0px 12px; 
    border-right: 1px solid #278fac; 
    text-shadow: 0 1px 1px #278FAC; 
    text-align: center; 
    max-width: 100px; 
    list-style: none; /* remove list style */ 
} 

a.lien_menu { 
    color: #fff; 
    text-decoration: none; 
    font-weight: bold; 
}

來源

2013-12-18 03:19:40

設置長度右邊框

回答

相關問題