帶文檔格式的HTML錯誤

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消除它們之間的空白：

 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 4

您正在對齊內聯元素的文本，而不是對齊元素本身。 如果您檢查並查看跨度，則跨度僅與跨度一樣大。 如果將它們設置為顯示，則可以設置寬度：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 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 --> 

詳細了解不同元素的顯示方式。 您具有塊級元素，內聯和（內聯塊）元素以及已替換的元素（圖像和表單元素）。

在此處閱讀有關float的更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/float並查看有關float的優缺點（及其缺點）和inline-block替代方法的討論，請參見： http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

另外，請了解一些方便的工具。 在Chrome和Internet Explorer中按f12鍵可為這些瀏覽器提供開發工具，使您能夠檢查網頁上的元素，查看哪些樣式正在影響該元素以及它們如何對其產生影響，以及使您能夠嘗試以下樣式：地點。 Firefox的Firebug提供了相同的功能。