Question

我正在为我参与的非营利组织打印一份文档，我目前正在处理第一页顶部的标题。

它应该是同一行上的两个标题，一个是左对齐，另一个是右对齐，两个都是13px粗体文本。它也应该直接位于文档标题的上方，文档标题以<h1>文本样式为中心。

一切都在游泳，除了标题都是左对齐的事实，我不能为我的生活弄清楚我做错了什么。我知道这不是我的浏览器，因为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

尝试使用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 3

因为<span>默认为display:inline，这意味着它只会增长到其内容的宽度。试试display:inline-block。还可以使用float来消除它们之间的空白区域：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 4

您正在对齐内联元素的文本，而不是对齐元素本身。如果您检查并查看跨度，它们只会与其中的文本一样大。您可以设置宽度，如果将它们设置为显示：内联块，然后将宽度设置为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 5

我会稍微改变一下，使其更具语义性（即有意义）

＆＃13;

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*/

＆＃13;

<!-- 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 -->

＆＃13;

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

在此处阅读有关浮动的更多信息：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 for Firefox提供相同的功能。

HTML错误w /文档格式

5 个答案: