Выравнивание элементов по горизонтали в заголовке

Question

Я только что сделал свой первый заголовок меню с помощью CSS. У меня проблемы с их выравниванием, хотя я хочу выровнять одно меню вправо, а другое - влево. Ниже приводится изображение того, как я хочу, чтобы это выглядело:

Вот некоторые из моих 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 классе :

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

Убедитесь, что вы сменили 85px на то, с чем вам удобно. Я просто это сказал, потому что, на мой взгляд, это то, что выглядит лучше всего. Что ваш новый заголовок должен выглядеть следующим образом:

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 и уль поставляется с обивкой 40px; поэтому его лучше вы либо указать, что так или

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

, который remobe все отступы и поля от каждого и каждого элемента HTML, который является лучшей практикой.

Я ДОЛЖЕН СКАЧАТЬ ВАС, ЕСЛИ ВЫ ДОБАВЛЯЕТ CSS В *, ЭТО ЗНАЧИТ, ЧТО ВЫ ПРИМЕНЯЕТЕ ВСЁ, и в настоящее время все на вашем сайте сойдет с ума, но это лучшая практика.