CSS：製作標籤式菜單。需要的想法

Question

我想創建一個CSS風格的菜單（參見：http://img.skitch.com/20100130-pr6qp63amd1nkwy4xar2ds3xex.png），它的外觀如何。我剛開始研究它，但已經鎖定了...不知道如何在CSS中完成它。

所以主要有以下差距：

1. 如何使上略顯粗糙的邊界？我以爲要使用背景圖像，但後來才意識到，在這種情況下，很難讓它看起來像例如菜單文本稍長
2. 如何將菜單與容器對齊？我的意思是菜單中的選定項目，右邊沒有邊框（並且內容旁邊也沒有邊框）。一分鐘後我想我可以定義右邊沒有邊框的菜單，然後將它移近邊框內容（因此它會隱藏邊框旁邊的邊框）......但我認爲這是一條無處可去的路徑

在此先感謝！

Answer 1

1. 你的邊框幾乎不得不用背景圖片來完成。你會想要一個圖像比最長的項目更長。

2. 選定的選項卡類應該有一個白色的右邊框，並且取消選擇的選項卡有一個黑色的邊框右邊。

代碼：

<style type="text/css"> 
.menu { 
    margin: 0; 
    padding: 0; 
    float: left; 
    width: 10%; 
    position: relative; 
    left: 2px; 
} 

.menu li { 
    /* Use a background image with your lines on all four sides */ 
    border: 2px solid black; 
    background-color: green; 

    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.menu .selected { 
    /* Use a background image with your lines and a white background inside the tab */ 
    border-right: none; 
    background-color: white; 
} 

.body { 
    border: 2px solid black; 
    margin-left: 10%; 
} 
</style> 

<div> 
    <ul class="menu"> 
     <li class="selected">Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
    </ul> 
    <div class="body"> 
     Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here 
     Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here 
     Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here 
     Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here 
     Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here 
     Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here 
     Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here 
     Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here 
    </div> 
</div>