html - 调整大小时，菜单栏折叠，一半的选项出现在其他选项下方的一行中

Question

我正在尝试创建我网站的主菜单栏。然而，虽然当浏览器全尺寸时它工作正常，但当我调整菜单栏的大小时，它会折叠，一半的选项出现在其他选项下方的一行中，而我希望它们保持一致，即使其中一些不可见.

为了使菜单栏的选择保持在单行中，即使该行不完全可见，我可以使用 HTML 和 CSS 做什么？我已经在主菜单和链接类中尝试了所有可能的位置，使用百分比和像素添加宽度，并添加过渡和固定位置组合。没有任何帮助。

.main-menu {
  background-color:grey;
  font-weight:bold;
  font-size:xx-large;
  color: black;
}
.linking {
  text-decoration: none;
  color: white;
  margin-right: 100px;
  border:solid 2px;
  border-color: red;
}

<p class="main-menu">
  <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
  <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
  <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
  <a href="sellerhome.html" class="linking">....</a>
</p>  

标签： htmlcss

Answer 1

可能这对你有帮助。看看下面的代码片段。

.main-menu {
  background:grey;
  font-weight:bold;
  font-size:xx-large;
  color: #000;
  overflow:hidden; /*to hide on collapse*/
  height:1em;
}
.linking {
  text-decoration: none;
  color: #FFF;
  margin: 0 100px 0 0;
  border:2px solid red;
	
}

<p class="main-menu">
    <a href="studenthome.html" class="linking">ΦΟΙΤΗΤΕΣ</a>
    <a href="secrethome.html" class="linking">ΓΡΑΜΜΑΤΕΙΑ</a>
    <a href="publisherhome.html" class="linking">ΕΚΔΟΤΗΣ</a>
    <a href="sellerhome.html" class="linking">....</a>
</p>

在https://jsfiddle.net/itsselvam/8wvb4k9o/预览