html - 如何确定响应式滚动菜单上的宽度

发布于 2020-03-30 21:50:23

屏幕尺寸变小时，我将使用本教程构建滚动菜单。

我也想用width元素添加边框，但是一旦定义width，scrolling: auto;元素就会被覆盖。我的目标是创建具有宽度的边框，并在屏幕最小化后仍保持自动滚动元素正常工作。

码宽定义的宽度

未定义宽度的码笔

.scrollmenu-container{
  margin: 0 auto;
  width: 500px;
  border-bottom: 2px solid #eee;
}
div.scrollmenu {
  text-align: center;
  margin: 0 auto;
  overflow: auto;
  white-space: nowrap;
  border-bottom: 2px solid #eee;
}

div.scrollmenu a {
  display: inline-block;
  color: grey;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  color: #24d175;
}

        <div class="scrollmenu-container">
          <div class="scrollmenu">
              <a>הכל</a>
              <a>USB</a>
              <a>מטענים</a>
              <a>מתאמים</a>
              <a>גדאג'טים למחשב'</a>
          </div>
        </div>

如何在没有覆盖滚动自动元素的情况下定义边框的宽度？

提问者

Yotam Dahan

被浏览

查看英文版

查看原文

.scrollmenu-container{ margin: 0 auto; width: 500px; border-bottom: 2px solid #eee; } div.scrollmenu { text-align: center; margin: 0 auto; white-space: nowrap; border-bottom: 2px solid #eee; } div.scrollmenu a { display: inline-block; color: grey; text-align: center; padding: 14px; text-decoration: none; } div.scrollmenu a:hover { color: #24d175; } @media (max-width:767px){ div.scrollmenu{max-width:300px; overflow-X: scroll;} }

<div class="scrollmenu-container"> <div class="scrollmenu"> <a>הכל</a> <a>USB</a> <a>מטענים</a> <a>מתאמים</a> <a>גדאג'טים למחשב'</a> </div> </div>

html - 如何确定响应式滚动菜单上的宽度

相关问题