Question

我创建了一个小的下拉菜单..问题是我不希望它是一个200px的按钮链接，除非它需要为了使文本适合。例如，如果寄存器有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>标签的不均匀宽度，那么你需要做的就是取消注释以下内容： / p>

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

memoization查看块和内联元素之间的区别：

CSS3 li ul自动大小问题

1 个答案: