Question

我正在遵循以下CSS指南： https://www.youtube.com/watch?v=1GNGtLbRyI4&list=PLr6-GrHUlVf8JIgLcu3sHigvQjTw_aC9C&index=66 当我复制CSS代码时，我遇到了这个问题：这两个元素在行上没有垂直对齐，如图所示。

这是问题的屏幕截图：

我尝试更改页边距，两个div元素的填充，但无法正常工作。当我使用inspect元素时，边距很好，我只是看到在主要内容和导航栏之间的空白处，我可以选择似乎是空白字符的位置。我想完全按照本教程进行操作，并保持简单，而且我不明白为什么它对我没有用。

HTML：

<body>
     <div id="header"></div>
     <div id="navbar"></div>
     <div class="sideright">
         <p>Links here</p>
     </div>
     <div class="maincontent">
        <p>Content here</p>
     </div>
 </body>

CSS：

body {
    background-color: #757CA4;
    margin: 0px;
    font-family: 'Open Sans', sans-serif, verdana;
    font-size: 14px;
}

#header {
    background-color: #323A6F;
    margin: 10px;
    border-radius: 5px;
    height: 80px;
}

#navbar {
    background-color: #323A6F;
    margin: 10px;
    border-radius: 5px;
   height: 35px;
}

.maincontent {
    background-color: #D1D3E2;
    margin: 10px 320px 10px 10px;
    border-radius: 5px;
    padding: 20px;
    font-size: 110%;
}

.sideright {
    background-color: #D1D3E2;
    margin: 0px 10px 10px 10px;
    border-radius: 5px;
    padding: 20px;
    font-size: 105%;
    float: right;
    width: 260px;
}

Answer 1

当我将HTML复制到环境中时，<div class="sideright">的结束标记后似乎有一个奇数空格。它在Codepen中显示为/ufeff。当我删除它时，它起作用了。

检查我的代码笔，您会看到想要的布局。

https://codepen.io/tylerp33/pen/QYNLWN

<body>
     <div id="header"></div>
     <div id="navbar"></div>
     <div class="sideright">
         <p>Links here</p>
     </div>
     <div class="maincontent">
        <p>Content here</p>
     </div>
 </body>

复制粘贴上面的内容，就可以了。

编辑：更正；我在codepen中删除的字符是Unicode字符&#65279，即“零宽度无间断空格”或U + FEFF。您可能已经复制了代码，却没有使用复制/粘贴知道它。另外，现在您知道您当前的文本编辑器没有显示Unicode字符（奇怪的是，我的也没有）。

这是我偶然发现的一个有用的解决方案：

一种选择是在一个非常基本的文本编辑器中打开文件，   不懂unicode，或不懂unicode但拥有   能够使用其实际代码显示任何非ASCII字符。

找到它后，您可以删除它周围的一小段文字   然后手动输入该文本。

希望这会有所帮助！

如何在一行的主内容div旁边垂直对齐侧栏

1 个答案: