Question

这是我的完整代码：https://jsfiddle.net/dv6gxtoh/2/

我希望下拉框能够展开并成为其内容的全部宽度（因此不必将内容放下一行）但我也不希望它将主下拉按钮拉伸到相同的宽度。

我能给出的最好的例子有点像这样：

http://i.stack.imgur.com/w3ym8.png

这是我正在使用的CSS：

* {
    margin: 0;
    padding: 0;
}
.click-nav ul {
    position:relative;
    display: inline-block;
}
.click-nav ul li {
    position: relative;
    list-style:none;
    cursor:pointer;
    display:inline-block;
}
.click-nav ul li ul {
    position:absolute;
    left:0;
    right:0;
}
.click-nav ul .clicker {
    position:relative;
    color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
    background:#196F9A;
}
.click-nav ul li a {
    display:block;
    padding:8px 10px;
    background:#FFF;
    color:#333;
    text-decoration:none;
}
.click-nav ul li a:hover {
    background:#F2F2F2;
}
/* Fallbacks */
 .click-nav .no-js ul {
    display:none;
}
.click-nav .no-js:hover ul {
    display:block;
}

我最接近position:relative;从.click-nav ul移除def create @user = User.create(user_params) if @user.save UserMailer.registration_confirmation(@user).deliver flash[:success] = "Please confirm email" redirect_to root_url else flash[:error] = "Something went wrong..." render 'new' end end def confirm_email user = User.find_by_confirm_token(params[:id]) if user user.email_activate flash[:success] = "Welcome to the Sample App! Your email has been confirmed. Please sign in to continue." redirect_to signin_url else flash[:error] = "Sorry. User does not exist" redirect_to root_url end private def user_params params.require(:user).permit(:name, :username, :email, :password, :password_confirmation, :avatar_url) end end除了下拉菜单不在打开它的按钮下。

任何帮助都将不胜感激。

Answer 1

对我来说white-space : nowrap就是你所需要的，即

.click-nav ul li a {
    display:block;
    padding:8px 10px;
    background:#FFF;
    color:#333;
    text-decoration:none;
    white-space: nowrap;
}

分叉小提琴 - ＆gt;的 http://jsfiddle.net/j5ckepbm/

Answer 2

检查共享小提琴..

您需要对css进行一些更改，例如在下拉列表中添加宽度/最小宽度。

white-space:nowrap

Click to see the fiddle, commented lines are mine changes

Answer 3

您可能需要再添加一个具有固定宽度的类来完成它。

.click-nav ul li ul li {
    width: 150px;
}

这是fiddle

谷歌风格下降 - 内容大于父母

3 个答案: