试图在同一行上有标题和无序列表 [英] Trying to have header and unordered list on same line
问题描述
问这个问题我觉得自己像个白痴，我在互联网上搜索了一些答案，但似乎什么也没找到.
I feel like an idiot asking this and I've scoured the internet looking for some answer and didn't seem to find anything.
我要做的就是将我的标题元素和我的无序列表放在同一行上，而不取消它们包含的特定边距.
All I'm trying to do is have my header element and my unordered list on the same line without cancelling the specific margins both of them contain.
h3 {
text-align: left;
margin: 40px 0px 0px 40px;
}
ul {
text-align: right;
}
ul li {
list-style: none;
display: inline;
margin: 0px 20px 0px 0px;
} <body>
<h3 id="header"> Darius Spady </h3>
<ul>
<li> About </li>
<li> Projects </li>
<li> Contact </li>
</ul>
</body>任何帮助将不胜感激！谢谢！
Any help would be appreciated! Thank you!
推荐答案
我会引入一个父元素并使用 display: flex;justify-content: space-between; 将它们放在同一行，由可用的空白分隔.您也可以使用 align-items 来垂直对齐它们.
I would introduce a parent element and use display: flex; justify-content: space-between; to put them on the same line, separated by the available white space. You can use align-items to vertically align them as well.
* {margin:0;padding:0;}
ul li {
list-style: none;
display: inline;
margin: 0px 20px 0px 0px;
}
h3 {
margin: 40px 0px 0px 40px;
}
.flex {
display: flex;
justify-content: space-between;
align-items: baseline;
}<header class="flex">
<h3 id="header"> Darius Spady </h3>
<ul>
<li> About </li>
<li> Projects </li>
<li> Contact </li>
</ul>
</header>这篇关于试图在同一行上有标题和无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
