Question

我在这里写了我的代码，但它不会给出空间

<a href="opinion.jsp"><font color="red"><h3>Recommendation</h3></font></a>
<a href="FindoneServ"><font color="red"><h3>Review Mining</h3></font></a>
<a href="rank.jsp"><font color="red"><h3>Generate Graph</h3></font></a>
<a href="index1.jsp"><font color="red"><h3>Sign out</h3></font></a>

我需要像这样的输出

Recommendation          Review Mining           Generate Graph        Signout

Answer 1

问题是你正在使用标题标签，默认情况下它们后面有一个换行符。

要更改此设置，您可以设置display CSS属性，该属性将元素与其他元素对齐：

h3 { 
  display: inline; 
}

您可能会重新考虑使用<h3>。一般而言，它适合作为其他内容的标题，而不是导航。我还建议删除<font>标记。你不需要它。您可以而且应该使用CSS进行样式化。

Answer 2

您的代码中存在几个问题：

font标签 - 不要使用它，它是丑陋的，弃用的，完全没用。使用css为您的元素设置样式。
内联元素h3 ^*中的块级元素a。这是无效的HTML，在语义上没有任何意义。
- h3是一个标题，它在逻辑上不适合锚元素。
- h3会产生换行符，因此您的所有链接都会分别放在一行。

根据您想要做什么，此标记更适合：

<!-- Use an unordered list for your anchor elements-->
<ul class="mylinks">
     <li><a href="opinion.jsp">Recommendation</a><li>
     <li><a href="FindoneServ">Review Mining</a><li>
     <li><a href="rank.jsp"   >Generate Graph</a><li>
     <li><a href="index1.jsp" >Sign out</a><li>
</ul>

和css相应

<!-- put this in the <head> of your html document --> 
<style type="text/css">
.mylinks li{
    float:left;   /* Fit all your links nicely in one line*/
    margin:0 5px; /* Give them to the left and right a little room to breathe */
    /* You can adjust the space by modifying the 5px value, */
    /* the 0 modifies the top/bottom spacing */
}

.mylinks a{
   color:red; /* fancy red color for your links*/
}
</style>

*：至少在HTML4中。问题仍然存在，这种标签嵌套是否有意义。

Answer 3

尝试使用：在div中列出的无序。

<!--HTML-->
<div id="Navigation">
<ul>
<li><a href="opinion.jsp">Recommendation</a></li>
<li><a href="FindoneServ">Review Mining</a></li>
<li><a href="rank.jsp">Generate Graph</a></li>
<li><a href="index1.jsp">Sign out</a></li>
</ul>
</div>


<!--CSS-->

#Navigation
{
      color: #9000A1;
      font-family:"Times New Roman", Times, serif;
}

如何在href之间留出空间？

3 个答案: