Question

我想做的是：

enter image description here

代码：

 <div class="contain-to-grid">
      <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name"><h1><a href="#">LOGO</a></h1></li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <ul class="right">

        <li><a href="#">RETURN<br/>home</a></li>
            <li><a href="#">TASTE<br/>new menu</a></li>
            <li><a href="#">ATTEND<br/>events</a></li>
            <li><a href="#">EXPLORE<br/>our culture</a></li>
            <li><a href="#">BOOK<br/>your place</a></li>

        </ul>
      </li>
    </ul>
</section>
</nav>
      </div>

然而，我实际看到的是：

enter image description here

如何做出我想要的东西？另外，如何增加顶杆的高度，使所有物品垂直居中，就像现在一样？

Answer 1

删除不必要的标记关闭并在代码中进行正确的缩进，因为它可以帮助您找到错误，因为这些关闭更快。

＆＃13;

<div class="contain-to-grid">
	<nav class="top-bar" data-topbar role="navigation">
		<ul class="title-area">
			<li class="name"><h1><a href="#">LOGO</a></h1></li>
			<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
		</ul>
		<section class="top-bar-section">
			<ul class="right">
				<li><a href="#">RETURN<br/>home</a></li>
				<li><a href="#">TASTE<br/>new menu</a></li>
				<li><a href="#">ATTEND<br/>events</a></li>
				<li><a href="#">EXPLORE<br/>our culture</a></li>
				<li><a href="#">BOOK<br/>your place</a></li>
			</ul>
		</section>
	</nav>
</div>

＆＃13;

尝试将其粘贴到您的css中：

＆＃13;

.top-bar-section > .right > li > a{
    line-height: inherit;
}

＆＃13;

Answer 2

请使用以下代码，但它没有响应（您必须使其响应）：

<div class="contain-to-grid fixed">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
        <li class="name"><h1><a href="#">LOGO</a></h1></li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span</a</li>
    </ul>
    <section class="top-bar-section">
        <ul class="right">
            <li><a href="#">RETURN<br/><span style="float: left;margin-top: -20px;">home</span></li>
            <li><a href="#">TASTE<br/><span style="float: left;margin-top: -20px;">new menu</span></a></li>
            <li><a href="#">ATTEND<br/><span style="float: left;margin-top: -20px;">events</span></a></li>
            <li><a href="#">EXPLORE<br/><span style="float: left;margin-top: -20px;">our culture</span></a></li>
            <li><a href="#">BOOK<br/><span style="float: left;margin-top: -20px;">your place</span></a></li>
        </ul>
    </section>
  </nav>
</div>

基金会5双线顶栏（CSS）

2 个答案: