Question

我正在重新设计一个网站，我使用了基础框架来帮助它做出响应。一切都很好，但是当手机大小的菜单从页面的一侧溢出。随附的是html＆amp; css，任何帮助将不胜感激！

HTML

 <div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="example-menu">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>

            <!-- PUT LOGO HERE PLS -->
            <li class="menu-text site-title">
                <a href="index.html"> <img src="img/logosean.png" alt="teddy bear head"> Teddy Bear Wheelchair Foundation</a>
            </li>
        </ul>
        <!-- NOT DOWN HERE SILLY, UP THERE -->

    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li class="navPush"><a href="help.html">Who We Help</a></li>
            <li class="navPush"><a href="aboutus.html">About</a></li>
            <li class="navPush"><a href="contribute.html">Contribute</a></li>
            <li class="navPush"><a href="partners.html">Partners</a></li>
            <li class="navPush"><a href="contact.html">Contact</a></li>
        </ul>
    </div>
</div>

CSS

.top-bar,
.top-bar ul {
  background-color: #4c1a1b;
  font-family: "Lato", "Helvetica", sans-serif;
  font-weight: 400;
  color: #fcfae1;
}

.top-bar ul a {
  color: #fcfae1;
  list-style: none;
}

.navPush {
  padding-top: 10px;
}

.top-bar ul a:hover {
  color: #f6e497;
}

.site-title {
  color: #fff;
  font-weight: 900;
  padding: inherit;
}

Text Cutting Off

由于

Answer 1

您正在menu中使用具有预定义属性

的课程ul

.menu > li {
  display: table-cell;
 }

因此，在CSS中，写一下：

.menu > li{
  display:inline-block;
}

或者更改菜单类。

希望它有所帮助！

基金会菜单溢出手机

1 个答案: