Question

一项家庭作业要求创建一个导航/导航栏区域，该区域包括可折叠按钮之前的div和图像以及标题。

我希望图像和标题并排对齐，并且不要在端口/屏幕尺寸更改时消失。

    <head>
  <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="main.css">

</head>

<body>
<div class="container-fluid">

    <nav class="navbar navbar-expand-md navbar-dark bg-secondary">
        <div>
                <img src="steve_headset_sm5.jpg" class="navbar-brand" alt="steve_with_headset"> 
<h4>My Website 3.0</h4>
        </div>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarmenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarmenu">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link">Main Content</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Python</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">SQL</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">JavaScript</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">PHP</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
            </ul>
        </div>
    </nav>

如下面的代码所示，问题是图像和标题彼此堆叠。谁能指出我做错了/应该做的事？

Answer 1

您可以使用inline-block，但我建议您学习flexbox。这是您要找的吗？

.nav-inline {
display: flex;
align-items: center;
}
.nav-inline h4 {
margin: 0;
}

<head>
  <meta charset="utf-8">
	
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	
	<link rel="stylesheet" href="main.css">
	
</head>

<body>
<div class="container-fluid">
    
    <nav class="navbar navbar-expand-md navbar-dark bg-secondary">
        <div class="nav-inline">
                <img src="steve_headset_sm5.jpg" class="navbar-brand" alt="steve_with_headset"> 
<h4>My Website 3.0</h4>
        </div>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarmenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarmenu">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link">Main Content</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Python</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">SQL</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">JavaScript</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">PHP</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">About</a>
                </li>
            </ul>
        </div>
    </nav>

如何在导航栏中对齐h4和img元素？

1 个答案: