javascript - 试图使网格中的两个项目出现在相同的高度

Question

我正在尝试创建一个包含专业技能和个人技能的技能部分的简历，我希望这两个部分出现在相同高度的列中，一个向左浮动，另一个向右浮动。附上我的图片想要什么，我有什么……上图是我的，下图是模板

谁能告诉我为什么“个人”的浮动略低于“专业”？

这是我的代码和 CSS。代码

<section class="skills">
            <h2 class="resumesectionheader"> Capabilities/Skills</h2>
            <ul class="listofskills">
                
                <li> <h3> Professional</h3>
                <ul>
                    <li> Blah</li>
                    <li> Blah</li>
                    <li> Blah</li>
                    <li> Blah</li>
                    <li> Blah</li> 
                </ul>    
                </li>
                <li> <h3> Personal</h3>
                 <ul>
                    <li> Blah</li>
                    <li> Blah</li>
                    <li> Blah</li>
                    <li> Blah</li>
                    <li> Blah</li> 
                </ul>  
                </li>
            </ul>
        </section>

CSS

.skills > ul {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem}

标签： javascripthtmlcss

Answer 1

正如@Sameer 指出的那样，您共享的代码没有任何问题。但是，我确实注意到另外两个 CSS 类，即resumesectionheader和listofskills.

由于代码可以正常工作，而无需一次消除一个以查找与skills类发生冲突的代码。