调整大小时，菜单栏会折叠，其中一半选项显示在其他选项下方的一行中

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>  

​

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/上预览

Answer 2

请使用下面的css属性执行相同的操作

​

    .main-menu
    {
    background-color:grey;
    font-weight:bold;
    font-size:xx-large;
    color: black;
    max-width: 100%;    
    min-width: 1000px;
    }
    .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">

​

Answer 3

试试这个：

​

.main-menu {
  background-color:grey;
  font-weight:bold;
  font-size:xx-large;
  color: black;
}
.main-menu .linking {
  background-color:grey;
  text-decoration: none;
  color: white;
  margin-right: 100px;
  border:solid 2px;
  border-color: red;
  /* added new css */
  width: 24%;        /* give width of 24% as you have 4 a-links each having 1px border */
  position: fixed;   /* set position fixed */
}

<p class="main-menu">
  <a href="#" class="linking" style="left: 0%;">ΦΟΙΤΗΤΕΣ</a>    <!-- set left 0% as first child -->
  <a href="#" class="linking" style="left: 25%;">ΓΡΑΜΜΑΤΕΙΑ</a> <!-- set left 25% as second child -->
  <a href="#" class="linking" style="left: 50%;">ΕΚΔΟΤΗΣ</a>    <!-- set left 50% as third child -->
  <a href="#" class="linking" style="left: 75%;">....</a>       <!-- set left 75% as fourth child -->
</p>

​