Как поставить заголовок рядом с ул

Question

У меня есть ul для навигации по сайту и заголовок, я хочу, чтобы они были рядом друг с другом, но один сверху. Я пытался сделать дом специфицированным c классом и выровнять его правильно, но не смог заставить его работать.

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: right;
}

li class="home" {
  text-align: left;
}

li {
  display: inline-block;
  margin: 10px;
}

<ul>
  <li class="home">Home</li>
  <li>Shop</li>
  <li>About</li>
  <li>Contact</li>
</ul>
<h1>Company</h1>

li class="home" была моей попыткой выровнять его по левому краю. Я хочу, чтобы компания была рядом с ul, но выровнена по левому краю

Я искал разные варианты в Google, но, похоже, ни один из них не работает. Как я могу решить мою проблему?

Answer 1

Просто используйте float для выравнивания элементов, https://jsfiddle.net/pc4kayrx/

<header>
<ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>    
</ul>
<h1>Company</h1>
</header>

<style>
ul {
float:right;
margin: 0px;
padding: 0px;
list-style-type: none;
text-align: right;
}


li {
display: inline-block;
margin: 10px;
}
</style>

Answer 2

Вы можете сделать это следующим образом.

html

<div>
  <ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <h1>Company</h1>
</div>

css

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: right;
}

li class="home" {
  text-align: left;
}

li {
  display: inline-block;
  margin: 10px;
}

h1 {
  margin: 0;  
}

div {
  display: flex
}

, если вы хотите показать lo go слева сторона, используйте html, как это.

<div>
  <h1>Company</h1>
  <ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

, и если вы хотите показать lo go на левой стороне и меню на правой стороне, используйте это в div

div {
  display: flex;
  justify-content: space-between;
}

дайте мне знать, если у вас возникнут проблемы.

Answer 3

проверить это:

 ul {
            display: inline;
        }

        li.home {
            text-align: left;
        }

        li {
            display: inline-block;
            margin: 10px;
        }
        h1.header{
            display: inline;
        }

<ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>
</ul>
<h1 class="header">Company</h1>

Answer 4

Пожалуйста, измените ваш li class = "home" на li.home вы должны использовать точку (.) В классе, а не в классе слов.

li.home {
  text-align: left;
}