HTML 文档格式错误

Question

我正在为我参与的一个非营利组织打字，我目前正在处理第一页最顶部的 headers。

应该是两个headers在同一行，一个left-aligned一个right-aligned，都是13px的粗体字。它也应该位于文档标题的正上方，以 <h1> 文本样式居中。

除了 headers 都是 left-aligned 之外，一切都进行得很顺利，而且我终究无法弄清楚自己做错了什么。我知道这不是我的浏览器，因为 StackEdit 和 WordPress 都无法识别它。而且我找了2个朋友看了，他们也搞不清楚问题所在

我知道我可能搞砸了，因为我还在学习 HTML（我还没有学习 CSS），但到目前为止我还没有意识到。

这是我的：

<span style="text-align:left; font-size:13px"><b>Project Name</b></span>
<span style="text-align:right; font-size:13px"><b>Branch Name, Org 
Name</b></span>
<div style=text-align:center><h1>Document Name 1-PubDate</h1></div>

Answer 1

这就是你想要做的吗？使用 float css 属性

<span style="float:left; font-size:13px"><b>Project Name</b></span>
<span style="float:right; font-size:13px"><b>Branch Name, Org Name</b></span>
<div style="text-align:center;clear:both"><h1>Document Name 1-PubDate</h1></div>

Answer 2

您正在对齐内联元素的文本，而不是对齐元素本身。如果您检查并查看跨度，它们只会与其中的文本一样大。如果将它们设置为显示，则可以设置宽度：inline-block 然后将宽度设置为 50% 并根据需要对齐文本：http://plnkr.co/edit/hQKymbtYp5iBealcEkr3

<span style="display: inline-block; width: 50%; text-align:left; font-size:13px">
    <b>Project Name</b>
</span>
<span style="display: inline-block; width: 49%; text-align:right; font-size:13px">
    <b>Branch Name, Org Name</b>
</span>
<div style=text-align:center>
    <h1>Document Name 1-PubDate</h1>
</div>

Answer 3

尝试使用 div 而不是 span，如下例所示：

<div style="float:left; text-align:left; font-size:13px; display:inline-block;"><b>Project Name</b></div>
<div style="float:right; text-align:right; font-size:13px; display:inline-block;"><b>Branch Name, Org 
Name</b></div>
<div style="clear:both;"></div>
<div style="text-align:center;"><h1>Document Name 1-PubDate</h1></div>

希望这可能有所帮助。最好的问候，

Answer 4

因为 <span> 默认为 display:inline，这意味着它只会增长与其内容的宽度一样宽。尝试 display:inline-block。同样用float来消除它们之间的白色space：

span.header
{
    display:inline-block;
    width:50%;
    font-size:13px;
    font-weight:bold;
}
span.header.left
{
    float:left;
    text-align:left;
}
span.header.right
{
    float:right;
    text-align:right;
}
div.document
{
    clear:both;
}

<span class="header left">Project Name</span>
<span class="header right">Branch Name, Org Name</span>
<div class="document"><h1>Document Name 1-PubDate</h1></div>

Answer 5

我要稍微改变一下，让它更语义化（即有意义）

h1 {text-align:center;  /*Center the H1 text*/
  clear:both; /*Remove the affects of loats*/}
.preHeader {font-size:13px; font-weight:bold;} /*Set font size and bold pre-head elements*/
.project, .org {width:50%} /*Set common details*/
.project {float:left; } /*Set the project elemetn to the left*/
.org {float:right; text-align:right; } /*Text align the Right side elelment and set it to the right*/

<!-- A Container for your project and organisation elelments -->
<!-- You don't actually need the container, but it seperates it nicely -->
<div class="preHeader"> 
  <div class="project">Project Name</div>
  <div class="org">Branch Name, Org Name</div>
</div>  
<h1>Title</h1><!-- Already is the width of its parent so don't need to wrap it -->

详细了解不同元素的显示方式。您有块级元素、内联和（内联块）元素以及替换元素（图像和表单元素）。

在此处阅读有关浮动的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/float 要查看关于浮点数优点（及其缺点）和 inline-block 替代方案的讨论，请参阅：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

附带说明，了解一些方便的工具。在 Chrome 和 Internet Explorer 中按 f12 可以为这些浏览器提供开发工具，使您能够检查网页上的元素并查看影响它的样式以及它们如何影响它，并使您能够进行试验样式到位。 Firebug Firefox 提供相同的功能。

HTML 文档格式错误

HTML Error w/ Document Formatting

html

formatting

document