Question

我刚刚使用CSS制作了我的第一个菜单标题。我无法对齐它们 - 我想将一个菜单对齐，另一个向左对齐。下面是我希望它看起来的图像：

Example

以下是我的一些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类添加一个margin-top样式：

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

确保使用您熟悉的内容更改85px。我只是把它放在那里，因为在我看来，这看起来最好。你的新标题应该是什么样的：

enter image description here

Answer 2

$("span[style*='background-color: #345678']");

你需要向menu2提供浮动权限 ul带有40px的填充物; 所以你要么更好地指定那种方式或

    <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;
}

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

如果你在CSS中加入CSS，我必须告诉你，这意味着你应用于所有事情，目前你网站上的所有内容都会变得疯狂，但这是最好的做法。

在标题中水平对齐元素

2 个答案: