Question

我为网站设计了一个psd模板，我正在使用bootstrap开发它，试图让它响应。

我想获得这种效果：

http://pho.to/9RxrT（它是照片的链接.StackOverflow不允许我上传照片。）

我设法获得了它，但只有几个屏幕宽度，当我调整屏幕大小时，它会完全改变。

我有这个CSS：

.menu {
    width: auto;
    font: 400 24px Calibri;
}

.vcenter {
    padding: 5% 0 1%;
}

a:hover{
    text-decoration:none;
    color: #7d2828 !important;
    border-bottom: 3px #7d2828 solid;
    padding-bottom: 96px;
}

a,a:active,a.active,a:visited,a:link{
    text-decoration:none;
    color: #444443;
}

header hr {
    height: 3px;
    background-color: #a5a5a5;
}

我的HTML文档块：

       <header>
            <div class="container">
                <div class="row vcenter">
                    <div class="logo col-sm-2 col-md-3">
                        <img src="images/Logo.png" alt="Logotipo" class="img-responsive"/>
                    </div>
                    <div class="col-sm-offset-1 col-sm-9 col-md-offset-1 col-md-8 vcenter">
                        <ul class="menu text-uppercase list-inline pull-right">
                            <li class="pull-left"><a href="#">Inicio</a></li>
                            <li class="pull-left"><a href="#">Servicios</a></li>
                            <li class="pull-left"><a href="#">Sobre Nosotros</a></li>
                            <li class="pull-left"><a href="#">Blog</a></li>
                            <li class="pull-left"><a href="#">Contacto</a></li>
                        </ul>
                    </div>
                </div>
                <hr>
            </div>
        </header>

我发现它，对于96px的填充，它固定在hr。但我不知道如何做到这一点。我试图使用@media查询，但没有成功。

谢谢

Answer 1

这是你要找的吗？您需要在菜单容器上定义最小宽度，以使菜单项保持在同一行。

.menu {
    width: auto;
    font: 400 24px Calibri;
}

.vcenter {
    padding: 5% 0 1%;
}

a:hover{
    text-decoration:none;
    color: #7d2828 !important;
    border-bottom: 3px #7d2828 solid;
}

a,a:active,a.active,a:visited,a:link{
    text-decoration:none;
    color: #444443;
}

ul.menu {
    min-width: 25em;
    border-bottom: 3px #a5a5a5 solid;
}

ul.menu li {
    display: inline-block;
    margin-right: 1em;
}

       <header>
            <div class="container">
                <div class="row vcenter">
                    <div class="logo col-sm-2 col-md-3">
                        <img src="images/Logo.png" alt="Logotipo" class="img-responsive"/>
                    </div>
                    <div class="col-sm-offset-1 col-sm-9 col-md-offset-1 col-md-8 vcenter">
                        <ul class="menu text-uppercase list-inline pull-right">
                            <li class="pull-left"><a href="#">Inicio</a></li>
                            <li class="pull-left"><a href="#">Servicios</a></li>
                            <li class="pull-left"><a href="#">Sobre Nosotros</a></li>
                            <li class="pull-left"><a href="#">Blog</a></li>
                            <li class="pull-left"><a href="#">Contacto</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>

Answer 2

诀窍在于使用<hr>元素紧靠列表的底部，因此您必须删除列表的border-bottom和border-top的{{1}}和在您的示例中，您必须更改

hr

通过

.vcenter {
    padding: 5% 0 1%;
}

一旦与元素相邻，您必须将列表底部与.vcenter { padding: 5% 0 0; }重叠

这样做：

hr

现在你必须让menu{ position: relative; margin-bottom: -4px; }和li元素到达列表的底部

现在你已经拥有了它，现在你只需要设置所需的大小li, a{ height: 100% } a{ display:inline-block; /*block works too, the catch is changes the `display:inline` }

喜欢menu

这里有一个小提琴示例，其中有两个不同大小的菜单，两个都在工作

我删除了一些代码以澄清

http://jsfiddle.net/Yandy_Viera/35ft5t4k/

菜单链接为：悬停时需要设置边框颜色，但必须超过一小时

2 个答案: