Question

我使用HTML和CSS制作了水平导航菜单。我使用过display：inline in li。但我在这里面临一个问题。我也在li标签中使用div标签。因此，输出不正确。我正在获取垂直菜单。但是使用div标签很重要。有没有其他方法来制作水平导航菜单，其中可以使用div标签。这是我想要做的一个小例子。

<ul class="somethingabcd">
    <li class="somethingdef">
        anythingabcd
    </li>
    <li class="somethingdef>
        <div class="container show" id="page-1">
            <p><a class="pageload-link" href="#page-2">Show Page Loader</a></p>
        </div>
        <div class="container" id="page-2">
            <section>
                <h2>This is an example for a new page.</h2>
                <p><a class="pageload-link" href="#page-1">Go back</a></p>
            </section>
        </div>
        <div id="loader" class="pageload-overlay" data-opening="M20,15 50,30 50,30 30,30 Z;M0,0 80,0 50,30 20,45 Z;M0,0 80,0 60,45 0,60 Z;M0,0 80,0 80,60 0,60 Z" data-closing="M0,0 80,0 60,45 0,60 Z;M0,0 80,0 50,30 20,45 Z;M20,15 50,30 50,30 30,30 Z;M30,30 50,30 50,30 30,30 Z">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 80 60" preserveAspectRatio="none">
                    <path d="M30,30 50,30 50,30 30,30 Z"/>
                </svg>
        </div>
    </li>
</ul>

在CSS文件中我给了li {display:inline}。但我没有得到横向导航菜单。有没有人能找到解决方案来做到这一点？

Answer 1

1）而不是显示：inline;尝试显示：inline-block;

2）为什么不使用<div>标签而不是尝试使UL水平？将<div>设置为显示：inline-block，您应该能够获得您正在描述的水平列表。

<div class="container">
<div style="display:inline-block;">
    <h2>This is heading ?</h2>
    <p><a href="?">This is link ?</a></p>
</div>
<div style="display:inline-block;">
    <h2>This is heading ?</h2>
    <p><a href="?">This is link ?</a></p>
</div>
<div style="display:inline-block;">
    <h2>This is heading ?</h2>
    <p><a href="?">This is link ?</a></p>
</div>
<div style="display:inline-block;">
    <h2>This is heading ?</h2>
    <p><a href="?">This is link ?</a></p>
</div>
</div>

我会使用这种格式，而不是UL

<强> EDITED

您需要重新组织<div class="saurav100">

我推荐以下结构：

<div class="saurav100">
  <span>Tech &nbsp;Store</span>
  <span><a class="pageload-link" href="#page-2">Login</a></span>
</div>

然后只需从“登录”链接中删除样式：

link {
  font-size: 16px;
  font-family: arial;
  text-shadow: none;
}

是否可以安排div来形成水平导航菜单？

1 个答案: