使CSS菜單項和標題展開爲正確的寬度

Question

我被卡住嘗試將菜單項展開爲全寬。由於某些原因，他們縮進.. 此外，如果我展開菜單名稱更多的字符，它會弄亂格式。我試圖讓它自動擴展，但如果我刪除'寬度'屬性它會變得混亂。

謝謝！

小提琴代碼：http://jsfiddle.net/n877s/5/

<div class="wrapper-demo"> 
<div id="dd" class="wrapper-dropdown-3" tabindex="1"> 
    <span>username</span> 
     <ul class="dropdown"> 
     <li><a href="#">Link #1</a></li> 
     <li><a href="#">Link #2</a></li> 
     <li><a href="#">Link #3</a></li> 
     </ul> 
</div> 

CSS

.wrapper-dropdown-3 .dropdown { 
    /* Size & position */ 
    position: absolute; 
    top: 140%; 
    left: 0; 
    right: 0; 

    /* Styles */ 
    background: black; 
    border-radius: inherit; 
    border: 1px solid rgba(0,0,0,0.17); 
    box-shadow: 0 0 5px rgba(0,0,0,0.1); 
    font-weight: normal; 
    -webkit-transition: all 0.5s ease-in; 
    -moz-transition: all 0.5s ease-in; 
    -ms-transition: all 0.5s ease-in; 
    -o-transition: all 0.5s ease-in; 
    transition: all 0.5s ease-in; 
    list-style: none; 

    /* Hiding */ 
    opacity: 0; 
    pointer-events: none; 
} 

.wrapper-dropdown-3 .dropdown:after { 
    content: ""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    bottom: 100%; 
    right: 15px; 
    border-width: 0 6px 6px 6px; 
    border-style: solid; 
    border-color: #fff transparent;  
} 

.wrapper-dropdown-3 .dropdown:before { 
    content: ""; 
    width: 0; 
    height: 0; 
    position: absolute; 
    bottom: 100%; 
    right: 13px; 
    border-width: 0 8px 8px 8px; 
    border-style: solid; 
    border-color: rgba(0,0,0,0.1) transparent;  
} 

.wrapper-dropdown-3 .dropdown li a { 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
    color: #8aa8bd; 
    border-bottom: 1px solid #e6e8ea; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,1); 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 


.wrapper-dropdown-3 .dropdown li i { 
    float: right; 
    color: inherit; 
} 

.wrapper-dropdown-3 .dropdown li:first-of-type a { 
    border-radius: 7px 7px 0 0; 
} 

.wrapper-dropdown-3 .dropdown li:last-of-type a { 
    border: none; 
    border-radius: 0 0 7px 7px; 
} 

/* Hover state */ 

.wrapper-dropdown-3 .dropdown li:hover a { 
    background: #f3f8f8; 
} 

/* Active state */ 

.wrapper-dropdown-3.active .dropdown { 
    opacity: 1; 
    pointer-events: auto; 
} 

/* No CSS3 support */ 

.no-opacity  .wrapper-dropdown-3 .dropdown, 
.no-pointerevents .wrapper-dropdown-3 .dropdown { 
    display: none; 
    opacity: 1; /* If opacity support but no pointer-events support */ 
    pointer-events: auto; /* If pointer-events support but no pointer-events support */ 
} 

.no-opacity  .wrapper-dropdown-3.active .dropdown, 
.no-pointerevents .wrapper-dropdown-3.active .dropdown { 
    display: block; 
} 

Answer 1

我希望這是什麼ü需要強制單行項目。從下拉類（間隔修正）改變了一些東西，如左填充，在.wrapper-dropdown-3上將寬度更改爲自動，並在卡around周圍添加了一些間距。

http://jsfiddle.net/n877s/8/

我添加按鈕的虛擬文本，只是爲了測試目的，而且效果很好。

Answer 2

壓痕由UL的默認左填充引起的（或以任何瀏覽器填充），it's 40像素。因此，設置

.wrapper-dropdown-3 {margin-left: 0; padding-left: 0;} 

如果在子菜單中較長的項目，不想設置width，則可以使用

white-space: nowrap;