CSS 根据屏幕分辨率设置不同的对齐方式

Question

这是我正在开发的网站...

http://camerabeanbags.co.uk/test/

这是响应式的，因此如果您使用网络浏览器 window 并更改宽度，您可以看到网站发生了变化。如果您查看绿色条右上角的 'Your Cart' 按钮，您会发现它在右侧对齐。如果您更改网络浏览器的宽度 window，它会向左对齐。

如何更改网络浏览器在将其左对齐之前必须达到的宽度，因为我希望它仅在没有 space 使它们彼此相邻时才这样做。与 iPad 一样，它向左对齐，但我希望它向右对齐。我试过 CSS @media 但无法弄清楚这个特定元素。

请你帮我解决我需要的 CSS 问题，让它只在特定屏幕宽度处向左对齐。

谢谢，

哈维

Answer 1

.kad-topbar-left{
    float: right !important;
}

这样它就不会在较小的 window 宽度上占据全宽。

Answer 2

在您网站的 CSS 中，已经有一个媒体查询，这就是导致购物车向左移动的原因。它看起来像这样：

@media (max-width: 767px) {
  #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu {
    float: none;
  }
}

高于 767px，这两个元素的样式为 float: left。

如果我们删除该规则，以便元素继续向左浮动，我们可以看到购物车仍会排成一行，搜索宽度可达 417 像素。所以我建议简单地修改媒体规则中的值（使用舍入数字）：

@media (max-width: 420px) {
  #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu {
    float: none;
  }
}