Проблемы с размещением <p>и <ul>на одной высоте - PullRequest
Новая
       5

Проблемы с размещением <p>и <ul>на одной высоте

1 голос
/ 12 июля 2020

Я недавно начал заниматься веб-разработкой, и у меня возникла проблема: я не могу выставить свои h1 и ul на одной высоте в заголовке. Я попытался поставить маржу на ul, затем на li или наложить на него отступ. То же самое с h1. Я знаю, что это, вероятно, простая проблема, но не могу понять, как ее решить. Вот HTML и CSS: 

body {
    font-family: arial;
    background: #333;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}

body header {
    font-size: 20px;
    background: black;
    color: white;
    padding: 5px 0px 3px 10px; 
    margin: 0px;
}

body header h1 {
    display: inline;
    font-weight: normal;
    margin: 40px 5px 0px 0px; 
    padding: 20px;
    font-size: 40px;
    margin-top: 50px;
}

body header ul {
    display: inline;
}

body header ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0px 5px 10px 10px;
}

body header ul li a {
    color: white;
    text-decoration: none;
    border: 1px solid white;
    border-radius: 3px;
    padding: 5px 15px 5px 15px; 
    background: #222;
}

body header ul li a:hover {
    color: green;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="styles/Skulldozer%201.1.css">
<head>
    <title>Example</title>
</head>
<body>

    <header> 
        <h1>Example</h1>

        <ul>
            <li><a href="">Posts</a></li>
            <li><a href="">Stories</a></li>
            <li><a href="">Contact</a></li>
        </ul>

    </header> 

    <div>
        
    </div>


    <script src="scripts/Skulldozer%201.1.js"></script>

</body>
</html>

1 Ответ

1 голос
/ 12 июля 2020

Я добавил vertical-align: bottom;, который, как мне кажется, решает вашу проблему. 

body {
    font-family: arial;
    background: #333;
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
}

header {
    font-size: 20px;
    background: black;
    color: white;
    padding: 5px 0px 3px 10px; 
    margin: 0px;
}

header h1 {
    display: inline;
    font-weight: normal;
    margin: 40px 5px 0px 0px; 
    padding: 20px;
    font-size: 40px;
    margin-top: 50px;
    vertical-align: bottom;
}

header ul {
    display: inline;
}

header ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0px 5px 10px 10px;
}

header ul li a {
    color: white;
    text-decoration: none;
    border: 1px solid white;
    border-radius: 3px;
    padding: 5px 15px 5px 15px; 
    background: #222;
}

header ul li a:hover {
    color: green;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="styles/Skulldozer%201.1.css">
<head>
    <title>Example</title>
</head>
<body>

    <header> 
        <h1>Example</h1>

        <ul>
            <li><a href="">Posts</a></li>
            <li><a href="">Stories</a></li>
            <li><a href="">Contact</a></li>
        </ul>

    </header> 

    <div>
        
    </div>


    <script src="scripts/Skulldozer%201.1.js"></script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...