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

Question

我使用 HTML 和 css 制作了一个水平导航菜单。我在 li 中使用了 display:inline。但我在这里面临一个问题。我还在 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) 代替显示：内联；试试 display: inline-block;

2) 与其尝试使 UL 水平，为什么不使用 <div> 标签来代替？将<div>s 设置为 display: 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

已编辑

你需要重新整理你的<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;
}