Question

所以我得到了这个标题，我想要中间的标识，然后是左边的2个链接和右边的2个链接。我想我知道怎么做但不是最好的方法。得到了我认为在下面工作的东西。编辑：显然还没有应用css，必须先得到html。

所以这是标题

    <header>
        <div id="head-wrap">
            <nav>
              <ul>
                <li><a href="smartphones.php">Smartphones</a></li>
                <li><a href="tablets.php">Tablets</a></li>
                <li><a href="laptops.php">Laptops</a></li>
                <li><a href="desktops.php">Desktops</a></li>
              </ul>         
            </nav>
        </div>  
    </header>

可行的方法

    <header>
        <div id="head-wrap">
            <nav>
                <div id="nav-left>
                   <ul>
                     <li><a href="smartphones.php">Smartphones</a></li>
                     <li><a href="tablets.php">Tablets</a></li>
                   </ul>
                </div>

                <img src="logo.png" alt="Logo" height="42" width="42">

                <div id="nav-right">
                   <ul>
                    <li><a href="laptops.php">Laptops</a></li>
                    <li><a href="desktops.php">Desktops</a></li>
                   </ul>
                </div>          
            </nav>
        </div>  
    </header>

这是最好的方式还是我应该采取不同的方式？

此致

Answer 1

您的示例中包含许多多余的HTML元素。而不是多个div容器，尝试这样的事情：

<nav>
    <ul>
        <li>
            <a href="smartphones.php">Smartphones</a>
        </li>
        <li>
            <a href="tablets.php">Tablets</a>
        </li>
        <li>
            <img src="logo.png" alt="Logo" height="42" width="42" />
        </li>
        <li>
            <a href="laptops.php">Laptops</a>
        </li>
        <li>
            <a href="desktops.php">Desktops</a>
        </li>
    </ul>
</nav>

然后display li元素inline：

li{
    display:inline;
}

Example

显然，您需要更多地编辑它以满足您自己的需求，但简单的结构是良好设计的开始。

将导航栏分成两部分

1 个答案: