English 中文(简体)
在无序名单内安置<div>时的校正
原标题:Vertical alignment when positioning a <div> within an unordered list

我在<代码><ul>要素内添加了一个搜索箱作为清单项目:

<nav id="notifications-menu">
    <ul id="display-inline-block">
        <li><a class="normal calendar" onclick="showUserCalendar( / , false);" href="#">My Calendar</a></li>
        <li><a class="normal calendarteam" onclick="showTeamCalendar( / , false);" href="#">Team Calendar</a></li>

        <li><div id="global-search-wrapper">
            <input type="text" class="global-search-box" name="s" value="type search term..." />
            <input type="image" src="/images/general/blank.gif" class="global-search-submit" value="" />
        </div></li>
    </ul>
</nav>

在适用以下特别安全局时,我获得以下产出: 我愿将项目案文中心(无意中)统一起来:

“entergraph

nav#notifications-menu  { 
    font-family:  Adelle , sans-serif;
    float:right;
    height: 52px; 
    width:600px;
    min-width:300px;
    padding: 0px 18px 0px 0px;
    text-align:right;
    font-size:13px;
}


nav#notifications-menu #display-inline-block,
nav#notifications-menu #display-inline-block li {
    /* Setting a common base */
    margin: 0;
    padding: 0;

}

nav#notifications-menu #display-inline-block li {
    display: inline-block;
}

nav#notifications-menu #display-inline-block li a.normal {
    color: #f0f0f0;
    text-decoration:none;
    margin-right:18px;
    padding-left:24px;

    background-repeat:no-repeat;


}
nav#notifications-menu #display-inline-block li a.envelope {
        background-image:url(../images/general/envelope.png);
            background-position: 0px 1px;
}
nav#notifications-menu #display-inline-block li a.calendar {
        background-image:url(../images/general/calendar.png);
            background-position: 0px -2px;
}
nav#notifications-menu #display-inline-block li a.calendarteam {
        background-image:url(../images/general/calendar_team.png);
            background-position: 0px -2px;
}

#global-search-wrapper {
    width: 234px;
    height: 30px;
    background-image: url(../images/general/search-box.png);
    background-repeat: no-repeat;
    padding: 0px;
    margin: 12px 0px 0px 0px;
    position: relative; }

    #searchwrapper form {
        display: inline;
        border: 0px; }

.global-search-box {
    border: 0px;
    background-color: transparent;
    position: absolute;
    top: 1px;
    left: 9px;
    width: 206px;
    height: 28px;
    color: #999999;
    font-style: italic;
    border:0px !important; }

.global-search-submit {
    border: 0px;
    background-color: transparent;
    position: absolute;
    top: 1px;
    left: 200px;
    width: 32px;
    height: 28px; }

任何帮助都将受到高度赞赏。

最佳回答

仅添加<代码>垂直-align至lis,例如:

nav#notifications-menu #display-inline-block li {
    display: inline-block;
    vertical-align: middle;
}

自<代码>底线改为缺省校正

问题回答

你们可以在酒吧上添加dding子,在之后给一些房间。





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签