CSS3 li ul 自动大小问题

Question

我创建了一个小的下拉菜单..问题是我不希望它是一个 200 像素的按钮链接，除非它需要为了使文本适合。例如，如果寄存器有 7 个字母但下拉下行有 12 个字母，它说下拉下行将是一个动态链接我不希望寄存器为 200px 宽。

<ul class="tactical-nav-isolate">
    <li><a href="#">Register</a></li>
    <li><a href="#">Login</a></li>
    <li class="account-dropdown">
    <a href="#">Dropdown Link<span class="glyphicon glyphicon-menu-down account-dropdown-icon"></span></a>
      <ul class="account-dropdown-nav">
        <li><a href="#">My Profile</a></li>
        <li><a href="#">My Account</a></li>        
        <li><a href="#">Logout</a></li>
      </ul>
    </li>
  </ul>




* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tactical-nav-isolate {
    text-align: center;
}
.account-dropdown-nav {
    background: #000000;
    text-align: left;
    text-indent: 15px;
}
.tactical-nav-isolate {
    float: right;
    margin-top: 0px;
    border-left: solid 1px #1e2a36;
}
.tactical-nav-isolate > li {
    float: left;
    border-left: solid 1px #1e2a36;
}
.tactical-nav-isolate li:first-child {
    border-left: none;
}
.tactical-nav-isolate a {
    color: #fff;
    display: block;
    line-height: 50px;
    width: 200px;
    text-decoration: none;
}
.account-dropdown {
    position: relative;

}
.account-dropdown:after {
    font-size: .5em;
    display: block;
    position: absolute;
    top: 38%;
    right: 12%;
}
.account-dropdown-icon {
    text-indent: 5px;
}
   .account-dropdown-nav {
    position: absolute;
    display: none;
}
.account-dropdown-nav li {  
    border-bottom: 1px solid rgba(255,255,255,.2);
}
.account-dropdown:hover > .account-dropdown-nav {
    display: block;
    background-image: url(../../media/opacityBG.png);   
}

Answer 1

我不是百分百确定您要的是什么，但是如果您的问题与适合您的 <a> 的不均匀宽度有关标签，那么您需要做的就是取消注释以下内容:

 .tactical-nav-isolate a {
        //display: block;
    } 

look at this查看 block 元素和内联元素之间的区别: