1

我有一个菜单，它看起来像这样：

<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里面有一个按钮，点击按钮，ul withclass="selectbox"将向下滑动并显示项目。这里的问题是我可以让菜单自行工作，但是一旦我在两者之间添加按钮，按钮就会将所有内容向下移动 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);
    }

}

这就是它的外观：在此处输入图像描述

4

1 回答 1

0

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

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

我在 Chrome 中进行了测试。当然，我无法判断您的 JavaScript 在此更改后是否仍在工作，因为您发布的内容不完整（未定义“已检查”）。

于 2013-04-05T13:13:00.750 回答