时间戳

首页 > 解决方案 > 我的 li 在大屏幕上向左浮动，但是当它在超小屏幕上时，li 会向下浮动。我怎样才能将我的 li 浮动也放在较小的屏幕上？

html - 我的 li 在大屏幕上向左浮动，但是当它在超小屏幕上时，li 会向下浮动。我怎样才能将我的 li 浮动也放在较小的屏幕上？

问题描述

我正在制作导航栏。在这个导航栏中，我使用了两个li标签。一种是语言，另一种是货币。当我将屏幕尺寸设为超小时，我希望li标签向左浮动。但它下降了另一个。我该如何解决这个问题。

我的折叠按钮也没有定位在正确的位置。也需要一个解决方案。

我尝试过使用float-xs-left类和 css 媒体查询。他们都没有工作。

我希望“EN”和“USD”选项向左浮动一个额外的小屏幕，我还希望搜索和总金额选项看起来很酷

标签： htmlcssbootstrap-4

解决方案

实现您所要求的一种方法是将标签（例如标签）display: flex的父元素上的CSS 属性与. 这是一个可能适用于小屏幕的示例：liulflex-wrap: nowrap

nav {
  width: 100%;
}

ul {
  width: 100%;
  list-style: none;
  padding: .5em;
  display: flex;
  flex-wrap: nowrap;
  background: slategrey;
}

li {
  margin: .5em;
  padding: 1em;
  background: lightblue;
}
<nav>
  <ul>
    <li>Language: French</li>
    <li>Currency: Euros €&lt;/li>
  </ul>
<nav>

推荐阅读