Html 垂直对齐顶部两个div不工作_Html_Css_Vertical Alignment

Html 垂直对齐顶部两个div不工作

html css

Html 垂直对齐顶部两个div不工作,html,css,vertical-alignment,Html,Css,Vertical Alignment,有人能帮我调整一下我的两个分区吗？我做错了什么？我有两个内联块作为div，并试图将它们并排排列在元素的最高点 <body> <ul id="navbar"> <li><a href="#skills">Skills</a></li> <li><a href="#work">Work</a></li> <li>&

有人能帮我调整一下我的两个分区吗？我做错了什么？我有两个内联块作为div，并试图将它们并排排列在元素的最高点

<body>
    <ul id="navbar">
        <li><a href="#skills">Skills</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Contact</a><li>
    </ul>

    <div id="intro">
        <p>HELLO</p>
    </div>

将

页边距顶部：0

或任何其他首选大小（即

页边距顶部：20px；

）添加到两个ID

例如






#李国宝{
显示：内联块；
左边缘：25%；
列表样式类型：无；
垂直对齐：顶部；
宽度：12%；
}

链接现在是并排的

你能再解释一下你想要实现的目标吗？。下面是代码的JSFIDLE。哦，对不起，我犯了个大错。应该将您链接到更新的。我试着把黄色的盒子和顶部的蓝色盒子对齐。感谢您的帮助。您上次的结束语

未命中实际的结束语斜杠：

，这可能会在某些浏览器上使其中断

#navbar {
display:inline-block;
margin-left:25%;
list-style-type:none;
vertical-align:top;
width:12%;
    }

#intro {
display:inline-block;
width:40%;
vertical-align:top;
}

<ul id="navbar">
 <li><a href="#skills">Skills</a></li>
 <li><a href="#work">Work</a></li>
 <li><a href="#contact">Contact</a></li> <!-- Forgot to close the element -->
</ul>

#navbar li{
    display:inline-block;
    margin-left:25%;
    list-style-type:none;
    vertical-align:top;
    width:12%;
}