菜单中按钮的css位置

Question

我有一个菜单，菜单如下：

<div class="menuContainer">
<div id="titlebarDiv" style="float: left;">
<a>Item 1</a>
<div id="container">
     <input type="button" value="0" class="masterPageNotifier" style="height: 30px;"onclick="NotifierButtonClicked()" />
     <input type="hidden" value="" class="mehidden" />
    <ul class="selectBox" />
    </div>
<a>Item 2</a>
<a>Item 3</a>
<a>Item 4</a>
<a>Item 5</a>
<div>
<div>

正如你可以看到的那样，我有div里面有一个按钮，点击按钮，带class="selectbox"的ul将向下滑动并显示项目。这里的问题是我可以让菜单自行工作，但只要我在其间添加按钮，按钮就会将所有内容向下移动1行，当我点击按钮.menuContainers时，背景会变得拉长。我想点击通知按钮时就像facebook一样。我试着用容器div上的绝对位置，但没有运气。

CSS ：

   input[type="submit"],
    input[type="button"],
    button {
        background:#5CCD00;
    background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
    background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
    background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
    background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
    background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
    background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
    padding:10px 15px;
    color:#fff;
    font-family:'Helvetica Neue',sans-serif;
    font-size:13px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #459A00;
    }

.menuContainer
{
width: 1000px; 
margin-left: auto; 
margin-right: auto; 
overflow: hidden; 
background-color: purple;
}


function NotifierButtonClicked() {
    if (checked == false) {
        checked = true;

        GetNotificationsForUser();

        $('.selectBox').slideToggle(200).css('borderTop', 'none');
        $('.selectBox li').click(function () {
            $('.selectBox').slideUp(200);
        });

        //$('.masterPageNotifier').val("0");
    }
    else if (checked == true) {
        checked = false;
        $('.selectBox').slideUp(200);
    }

}

看起来如何：

Answer 1

通过添加以下内容，您可以让“容器”<div>与<a>元素保持同一行：

#container {  display:inline-block; width:50px; }

我在Chrome中测试过。当然，我无法判断您的JavaScript在此更改后是否仍然有效，因为您发布的内容不完整（未选中“已选中”）。