在 header 中水平对齐元素

Question

我刚刚使用 CSS 制作了我的第一个菜单 header。不过我在对齐它们时遇到了问题——我想将一个菜单向右对齐，另一个向左对齐。下面是一张关于我希望它看起来如何的图片：

这是我的一些 CSS 代码：

.main-navigation {
    clear: both;
    margin: 0.5em auto;
    max-width: 2560px;
    min-height: 55px;
    position: relative;
    width: 92%;
}

.navbar {
    background-color: #fff;
    opacity: 0.8;
    margin: 0 auto;
    max-width: 2560px;
    width: 100%;
    position:fixed;
    -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
    -moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);
    box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);
    z-index:9999;
}

.navbar menu2 {
    float:right;
    }

.navbar img {
    z-index: 1000;
    width:50px;
    height:50px;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
}

My site is here 如果您想查看更多源代码。

Answer 1

首先你想用 <div>:

包围那个菜单

<div class="right">
    <ul class="menu2"> <a href="http://www.w3schools.com/html/">MOVE ME TO THE right in line with search/menu content</a> | <a href="http://www.w3schools.com/html/">Shop  </a> | <a href="http://www.w3schools.com/html/">Info </a>
</div>

然后在您的 css 代码中使用 float 样式将其向右移动，然后使用 margin-right 这样它就不会与您的搜索按钮冲突:

.right {
  float: right;
  margin-right: 75px;
}

完成后，你想将主要内容向下移动一点，所以我想在 page-title class 中添加 margin-top 样式:

.page-title {
  margin-top: 85px;
}

确保将 85px 更改为您认为合适的内容。我只是把它放在那里，因为在我看来，这看起来最好。您的新 header 应该是什么样子：

Answer 2

    <class="img" style="
    /* float: left; */
">

                <div class="nav-menu" style="
    float: left;
"><ul><li class="page_item page-item-5"><a href="http://yarnball.net.au/cart/">Cart</a></li><li class="page_item page-item-6"><a href="http://yarnball.net.au/checkout/">Checkout</a></li><li class="page_item page-item-7"><a href="http://yarnball.net.au/my-account/">My Account</a></li><li class="page_item page-item-2"><a href="http://yarnball.net.au/sample-page/">Sample Page</a></li><li class="page_item page-item-4 current_page_item"><a href="http://yarnball.net.au/">Shop</a></li><li class="page_item page-item-104"><a href="http://yarnball.net.au/wishlist/">Wishlist</a></li><li class="page_item page-item-105 page_item_has_children"><a href="http://yarnball.net.au/my-lists/">Wishlists</a><ul class="children"><li class="page_item page-item-106"><a href="http://yarnball.net.au/my-lists/create-a-list/">Create a List</a></li><li class="page_item page-item-108"><a href="http://yarnball.net.au/my-lists/find-a-list/">Find a List</a></li><li class="page_item page-item-109"><a href="http://yarnball.net.au/my-lists/edit-my-list/">Manage List</a></li><li class="page_item page-item-107"><a href="http://yarnball.net.au/my-lists/view-a-list/">View a List</a></li></ul></li></ul></div><img src="http://wiki.miranda-ng.org/images/archive/c/c0/20140919163518!WhatsApp_logo.png">

                <ul class="menu2" id="right"style="
    /* box-sizing: border-box; */
    padding: 0px;
"> <a href="http://www.w3schools.com/html/">MOVE ME TO THE right in line with search/menu content</a> | <a href="http://www.w3schools.com/html/">Shop  </a> | <a href="http://www.w3schools.com/html/">Info </a>


                    <form role="search" method="get" class="search-form" action="http://yarnball.net.au/">
                <label>
                    <span class="screen-reader-text">Search for:</span>
                    <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:">
                </label>
                <input type="submit" class="search-submit" value="Search">
            </form>


                </ul></class="img">



#right
{
float:right;
padding:0px;
}
    .nav-menu
{
float:left;
}
ul
{
padding:0px;
}

你需要给menu2浮动权限并且 ul 带有 40px 的填充；所以你最好指定那个方式或

*
{
padding:0px;
margin:0px;
}

这将移除每个 html 元素的所有填充和边距，这是最佳实践。

我必须告诉你，如果你在 * 中添加 CSS，这意味着你正在应用一切，目前你网站上的一切都会变得疯狂，但这是最佳实践。

在 header 中水平对齐元素

Aligning elements horizontally in header

css

css-float