Question

我正在使用bootstrap，但我关闭了响应。我试图保持我的div位置，即使它在其他设备中（没有响应）。

屏幕截图1普通版（1366 * 768）：

nexus 10渲染中的截图2：

正如你在nexus 10中看到的那样，左右之间的距离变得更远了。

这是我的HTML代码：

<div class="topbar">
    <div class="navbar navbar-default" role="navigation">
        <ul class="nav navbar-nav navbar-left pull-left menu-nav">
            <li><a href="index.html" class="logo">Work</a></li>
            <li><a href="index.html" class="logo">About</a></li>
            <li><a href="index.html" class="logo">Contact</a></li>
        </ul>
        <ul class="nav navbar-nav pull-right site-logo">
            <li>
                <img src="http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png" alt="" class="logo-img">
            </li>
        </ul>
        <!--/.nav-collapse -->
    </div>
</div>

这是我的css：

.container { 宽度：100％; }

.logo-img {
    max-height: 45px;
    max-width: 100%;
}

.topbar {
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
}

.topbar .topbar-left {
    float: left;
    position: relative;
    width: 240px;
    z-index: 1;
}

.menu-nav {
    display: inline-block;
    float: left;
    padding: 35px 0;
    max-width: 35%;
    text-align: left;
    margin: 0 35px;
    position: relative;
    top: 0;
    z-index: 7999;
}

.menu-nav li {
    font-style: italic;
    font-weight: bold;
    color: #000;
}


.site-logo{
    display: block;
    float: right;
    padding: 35px 0;
    max-width: 35%;
    text-align: right;
    margin: 0 35px;
    position: relative;
    top: 0;
    z-index: 7999;
}

.topbar .topbar-right {
    float: right;
    position: relative;
    width: 240px;
    z-index: 1;
}

.navbar-default {
    background: #ffffff;
    border-radius: 0px;
    border: none;
    margin-bottom: 0px;
}

有可能吗？

Answer 1

如果我理解正确，您希望两个顶部<ul>之间的距离在所有设备上始终相同？

我有一些建议：

看看viewport units。它允许您根据用户视口的大小设置元素的大小。
也许你只能使用标准%，我不知道你用的是什么。
您是否在HTML标头中设置了<meta name="viewport" content="width=device-width">？它根据设备像素密度设置视口大小。更多信息：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

CSS如何在每个设备中保持位置

1 个答案: