html - 使用顶部的 CSS li 项目放置

问题描述

我有一个水平放置的 ul li 列表。这些 li 项在每个 li 中依次包含一个标签和 img 标签。这些是理想的图标菜单。

这就是我想要的 - 在台式机和平板电脑中，li 列表中的所有 li 项目都应该是水平的。在手机中查看时，其中一项 li 项 - 第一项应放置在右上角，其余 li 项应放置在水平位置。这应该在所有手机屏幕上都有响应。如何实现这一点。

我对这个特殊的 li 使用了 top 和 right 样式，它应该显示在右上角，但在某些屏幕上它会熄灭，并且放置不正确，如何实现？

下面是代码。

.navbar-nav {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .mobView {
        top: -8vh;
        right: -40vh;
    }
}

<ul class="navbar-nav navbar-right">
    <!-- **This li needs to be at the top right corner when viewed in phone screen** -->
    <li class="dropdown mobView">
        <a href="javascript:void(0);">
            <img src="1.svg" class="imgicon">
            <span class="username">li 1</span>
        </a>
    </li>

    <li class="dropdown" id="li2">
        <a href="javascript:WindowLocation('/123');">
            <img src="2.svg" class="imgicon">
            <span class="hidden-xs">li 2</span>
        </a>
    </li>

    <li class="dropdown" id="li3">
        <a href="javascript:WindowLocation('/123');">
            <img src="3.svg" class="imgicon">
            <span class="hidden-xs">li 3</span>
        </a>
    </li>

    <li class="dropdown" id="li4">
        <a href="javascript:WindowLocation('/123');">
            <img src="4.svg" class="imgicon">
            <span class="hidden-xs">li 4</span>
        </a>
    </li>
</ul>

在桌面

在移动中想要这样：

标签： htmlcssresponsive-designresponsive

我希望我有帮助

.navbar-nav {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .navbar-nav li {
        position: absolute;
        list-style: none;
    }

    .navbar-nav li:nth-child(1) {
        top: 50px;
        left: 10px;
    }

    .navbar-nav li:nth-child(2) {
        top: 10px;
        right: 10px;
    }

    .navbar-nav li:nth-child(3) {
        top: 50px;
        right: 80px;
    }

    .navbar-nav li:nth-child(4) {
        top: 50px;
        right: 10px;
    }
}

<ul class="navbar-nav navbar-right">
    <!-- **This li needs to be at the top right corner when viewed in phone screen** -->
    <li class="dropdown mobView">
        <a href="javascript:void(0);">
            <img src="1.svg" class="imgicon">
            <span class="username">li 1</span>
        </a>
    </li>

    <li class="dropdown" id="li2">
        <a href="javascript:WindowLocation('/123');">
            <img src="2.svg" class="imgicon">
            <span class="hidden-xs">li 2</span>
        </a>
    </li>

    <li class="dropdown" id="li3">
        <a href="javascript:WindowLocation('/123');">
            <img src="3.svg" class="imgicon">
            <span class="hidden-xs">li 3</span>
        </a>
    </li>

    <li class="dropdown" id="li4">
        <a href="javascript:WindowLocation('/123');">
            <img src="4.svg" class="imgicon">
            <span class="hidden-xs">li 4</span>
        </a>
    </li>
</ul>

html - 使用顶部的 CSS li 项目放置

问题描述

解决方案

推荐阅读