css - 自动扩大导航按钮之间的间隙 - CSS

Question

我正在使用 CSS 制作顶部导航。有些按钮 float 到左侧，有些按钮 float 到右侧。中间有空的间隙按钮。如何使该间隙自动扩展，以便整个顶部导航占据页面的 100%？

这是示例图片的链接:

HTML:

<div class="row clearfix">
    <div class="top_nav">
        <ul>
            <li>
            <div class="ui-nav-button first">
                <a class="button first" href="#"><i class="icon-home"></i></a>
            </div>
            </li>
            <li>
            <div class="ui-nav-button">
                <a class="button" href="#">About</a>
            </div>
            </li>
            <li>
            <div class="ui-nav-button">
                <a class="button" href="#">Contact</a>
            </div>
            </li>
            <li>
            <div class="ui-nav-button">
                <a class="button empty">.</a>
            </div>
            </li>
            <li>
            <div class="ui-nav-button">
                <a class="button dropdown" href="#">Hi, Michael<i class="icon-sort-down"></i></a>
            </div>
            </li>
            <li>
            <div class="ui-nav-button last">
                <a class="button logout last" href="#"><i class="icon-off"></i></a>
            </div>
            </li>
        </ul>
    </div>
</div>

CSS:

/* Clear fix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table; 
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.top_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top_nav ul li {
    display: inline;

}

div[class*="ui"] {
    vertical-align: top;
    display: -moz-inline-stack;
    float: left;
    position: relative;
    height: 44px;

    margin-bottom: 3px;
    background-color: #444444;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    zoom: 1;
    *display: inline;
}

.top_nav a.button, .top_nav div[class*="ui"] {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.button {
    float: left;
    position: relative;
    bottom: 3px;
    height: 28px;
    line-height: 32px;
    padding: 8px 30px;
    background-color: #f7f7f7;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #777777;
    font-weight: bold;
    border-left: 1px solid #cecece;
    font-family: sans-serif;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.input:focus {
    outline: none;
    border-color: #9d9d9d;
}

.button i {
    position: relative;
    line-height: 23px;
    top: 1px;
}

.dropdown_nav  {
    display: none;
}

/* Set your empty space with */
.button.empty {
    width: auto;
    text-indent: -9999px;
}

.button.dropdown i {
    margin-left: 15px;
    margin-right: -15px;
}

.button.first, div[class*="ui"].first  {
    border: 0px;

    -webkit-border-top-left-radius: 3px !important;
    -webkit-border-bottom-left-radius: 3px !important;
    -moz-border-radius-topleft: 3px !important;
    -moz-border-radius-bottomleft: 3px !important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}

.button.last, div[class*="ui"].last  {
    -webkit-border-top-right-radius: 3px !important;
    -webkit-border-bottom-right-radius: 3px !important;
    -moz-border-radius-topright: 3px !important;
    -moz-border-radius-bottomright: 3px !important;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

.button.first, .button.last {
    padding: 8px 15px;
}

.button[href]:hover {
    bottom: 4px;
    -webkit-transition-property: top, bottom;
    -moz-transition-property: top, bottom;
    -o-transition-property: top, bottom;
    -ms-transition-property: top, bottom;
    transition-property: top, bottom;
    -webkit-transition-duration: 0.05s;
    -moz-transition-duration: 0.05s;
    -o-transition-duration: 0.05s;
    -ms-transition-duration: 0.05s;
    transition-duration: 0.05s;
}

.button[href]:active {
    bottom: 0px;
}

.button i {
    font-size: 19px;
}

CSS/HTML 链接:http://jsfiddle.net/xRCqx/ .

Answer 1

这是干净的代码。

HTML:

<div class="row clearfix">
    <div class="top_nav">
        <ul>

            <li>
            <div class="ui-nav-button">
                <a class="button" href="#">About</a>
            </div>
            </li>
            <li>
            <div class="ui-nav-button">
                <a class="button" href="#">Contact</a>
            </div>
            </li>

            <li>
            <div class="ui-nav-button">
                <a class="button dropdown" href="#">Hi, Michael<i class="icon-sort-down"></i></a>
            </div>
            </li>

        </ul>
    </div>
</div>

CSS:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.top_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top_nav ul li {
    display: inline;

}

div[class*="ui"] {
    vertical-align: top;
    display: -moz-inline-stack;
    float: left;
    position: relative;
    height: 44px;

    margin-bottom: 3px;
    background-color: #444444;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    zoom: 1;
    *display: inline;
}

.top_nav a.button, .top_nav div[class*="ui"] {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.button {
    float: left;
    position: relative;
    bottom: 3px;
    height: 28px;
    line-height: 32px;
    padding: 8px 30px;
    background-color: #f7f7f7;
    text-decoration: none;
    letter-spacing: 0.1em;
    color: #777777;
    font-weight: bold;
    border-left: 1px solid #cecece;
    font-family: sans-serif;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.input:focus {
    outline: none;
    border-color: #9d9d9d;
}

.button i {
    position: relative;
    line-height: 23px;
    top: 1px;
}

.dropdown_nav  {
    display: none;
}

/* Set your empty space with */
.button.empty {
    width: auto;
    text-indent: -9999px;
}

.button.dropdown i {
    margin-left: 15px;
    margin-right: -15px;
}

.button.first, div[class*="ui"].first  {
    border: 0px;

    -webkit-border-top-left-radius: 3px !important;
    -webkit-border-bottom-left-radius: 3px !important;
    -moz-border-radius-topleft: 3px !important;
    -moz-border-radius-bottomleft: 3px !important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}

.button.last, div[class*="ui"].last  {
    -webkit-border-top-right-radius: 3px !important;
    -webkit-border-bottom-right-radius: 3px !important;
    -moz-border-radius-topright: 3px !important;
    -moz-border-radius-bottomright: 3px !important;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}

.button.first, .button.last {
    padding: 8px 15px;
}

.button[href]:hover {
    bottom: 4px;
    -webkit-transition-property: top, bottom;
    -moz-transition-property: top, bottom;
    -o-transition-property: top, bottom;
    -ms-transition-property: top, bottom;
    transition-property: top, bottom;
    -webkit-transition-duration: 0.05s;
    -moz-transition-duration: 0.05s;
    -o-transition-duration: 0.05s;
    -ms-transition-duration: 0.05s;
    transition-duration: 0.05s;
}

.button[href]:active {
    bottom: 0px;
}

.button i {
    font-size: 19px;
}