为什么这个导航中的 ul 不出现在前一个 div 之后?

ul标签不在同一行的前一行div之后(类Logo的标签(。

我想在同一行中在logo标签之后显示ul标签。但是，ul在我想显示它的行下方。

body {
margin: 0px;
direction: rtl;
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
}
.Logo img {
width: 100%;
height: 100%;
}

<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul></ul>
<div></div>
<div></div>
</nav>
</header>
</body>

ul和div元素是块级的，这意味着它们采用100%的宽度并将堆叠在顶部。

为了使它们彼此并排，您需要使用floats、inline-block、flexbox或grid。

在这种情况下，我会建议弹性框。将display: flex添加到直接父元素

body {
margin: 0px;
direction: rtl;
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
display: flex;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
}
.Logo img {
width: 100%;
height: 100%;
}

<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul><li>List Here</li></ul>
</nav>
</header>
</body>

只需将display：inline-block添加到徽标和UL中

即可

body {
margin: 0px;
/* direction: rtl; */
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
display:inline-block;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
display:inline-block;
}
.Logo img {
width: 100%;
height: 100%;
}

<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul></ul>
<div></div>
<div></div>
</nav>
</header>
</body>

flexbox确实是要走的路。您需要将边距顶部：100px 添加到 ul

body {
margin: 0px;
direction: rtl;
}
header {
width: 100%;
min-height: 700px;
height: auto;
overflow: auto;
background-color: #007bff;
}
nav {
margin-top: 0px;
height: 50px;
display: flex;
}
nav ul {
width: 60%;
height: 50px;
margin: 0px auto;
border: 2px solid black;
margin-top:100px;
}
.Logo {
width: 160px;
height: 50px;
margin-left: 0px;
margin-right: 30px;
margin-top: 100px;
margin-bottom: 0px;
}
.Logo img {
width: 100%;
height: 100%;
}

<body>
<header>
<nav>
<div class="Logo"><img src="Content/img/logo.png" alt="جاب بورد"></div>
<ul><li>List Here</li></ul>
</nav>
</header>
</body>

相关内容

最新更新

热门标签：