Question

我在Laravel 5.4下开发。有一个顶级菜单显示，如图1所示。top menu 但是，我希望菜单显示如图片2 ideal top menu show，只在一行中显示在任何尺寸的屏幕上。有没有什么好的解决方案呢？喜欢通过更改菜单字体自动？

.venus-menu {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  float: left;
  font-family: 'Open Sans', sans-serif;
  list-style: none;
  background: #fff;
  box-shadow: 0 1px 3px #dedede;
}

<div class="navbar-header">
  <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#" style="display: block;"><i class="fa fa-bars"></i> </a>
  <div class="content">
    <ul class="venus-menu" id="top_bar">
      <li><a href="#" title="首页" target="_blank">首页</a></li>
      <li><a href="#" title="title1" target="_blank">title1</a></li>
      <li><a href="#" title="title2" target="_blank">title2</a></li>
      <li><a href="#" title="title3" target="_blank">title3</a></li>
      <li><a href="#" title="title4" target="_blank">title4</a></li>
      <li><a href="#" title="title5" target="_blank">title5</a></li>
      <li><a href="#" title="title6" target="_blank">title6</a></li>
      <li><a href="#" title="title7" target="_blank">title7</a></li>
      <li><a href="#" title="title8" target="_blank">title8</a></li>
      <li><a href="#" title="title9" target="_blank">title9</a></li>
      <li><a href="#" title="title10" target="_blank">title10</a></li>
    </ul>
  </div>
</div>

Answer 1

检查工作小提琴是否相同，但你必须改变css部分

注意 - 正如您所说“顶级菜单仅在一行中显示”

工作小提琴

<强> fiddle code

.navbar-minimalize {
  margin:5px 50px 5px 15px;
  display: inline-block;
}
.content {
  width:100%;
  display:flex;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  float: left;
  font-family: 'Open Sans', sans-serif;
  list-style: none;
  background: #fff;
  box-shadow: 0 1px 3px #dedede;
}
.content ul.venus-menu {
  width:100%;
  margin:0px;
  padding:0px;
  list-style:none;
  border-left: 1px solid #ddd;
  display:flex;
  flex-flow:row nowrap;
  justify-content:space-around;
}

.content ul.venus-menu li {
  display:flex;
  justify-content:space-around;
  align-items:center;
  flex-flow:row wrap;
}
.content ul.venus-menu li a {
  display:block;
  padding:10px 15px;
  font-size:15px;
  text-decoration:none;
  color:#505050;
}
.content ul.venus-menu li a:hover {
  background:#eee;
}

<div class="content">
  <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
  <ul class="venus-menu" id="top_bar">
    <li><a href="#" title="首页" target="_blank">首页</a></li>
    <li><a href="#" title="title1" target="_blank">title1</a></li>
    <li><a href="#" title="title2" target="_blank">title2</a></li>
    <li><a href="#" title="title3" target="_blank">title3</a></li>
    <li><a href="#" title="title4" target="_blank">title4</a></li>
    <li><a href="#" title="title5" target="_blank">title5</a></li>
    <li><a href="#" title="title6" target="_blank">title6</a></li>
    <li><a href="#" title="title7" target="_blank">title7</a></li>
    <li><a href="#" title="title8" target="_blank">title8</a></li>
    <li><a href="#" title="title9" target="_blank">title9</a></li>
    <li><a href="#" title="title10" target="_blank">title10</a></li>
  </ul>
</div>

Laravel如何只在一行中显示顶层菜单

1 个答案: