Question

我确信这是一个愚蠢的简单问题，但是对于HTML，我永远无法决定获得理想结果的最佳方式......我真的没有为网络编码做好准备。

无论如何......我有一个页面，我需要在其两侧显示一个带有两个链接的标题，我需要标题居中并使用与链接不同的字体/样式。

这是我目前的设置，忽略了到目前为止我只有1个链接的事实......我需要先解决第一个问题，然后再担心另一个

<div style="float:left clear:none width:100%">
<div style="width:20%"><a href="/queryReport.action?currentFacility=<s:property value="previousFacility"/>">Previous Facility</a></div>
<div style="width:20%" class="important-center">Facility <s:property value="currentFacility"/></div>
</div>

.important-center {
    font-size:20px;
    letter-spacing:1px;         
    text-align: center;
    position:center;
    padding: 6px;
    color: #314457;
}

问题在于我的链接不断出现在我的标题之上。如果有人能给我一些关于如何解决这个问题的指示，我会很感激！

Answer 1

如果您希望链接与标题相邻，请使用此

<div style="text-align: center;">
    <a href="#">Previous Facility</a>
    <span class="important-center">Facility</span>
    <a href="#">Next Facility</a>
</div>

如果您希望链接粘在两侧，请使用此

<div style="text-align: center;">
    <a href="#" style="float: left;">Previous Facility</a>
    <span class="important-center">Facility</span>
    <a href="#" style="float: right;">Next Facility</a>
</div>

<强> CSS

.important-center {
    font-size:20px;
    letter-spacing:1px; 
    padding: 6px;
    color: #314457;
}

见here。

Answer 2

您是否尝试过使用ul？它应该给你想要的结果。

类似的东西：

<div style="float:left; clear:none; width:100%;">
<ul>
  <li><a href="/queryReport.action?currentFacility=<s:property alue="previousFacility"/>">Previous Facility</a></li>
  <li class="important-center">Facility <s:property value="currentFacility"/></li>
  <li><a href="/queryReport.action?currentFacility=<s:property alue="nextFacility"/>">NextFacility</a></li>
</ul>
</div>

#navigation { margin: 0px; padding: 0px; list-style: none; }
#navigation li { padding: 2px; }

编辑：我认为melhosseiny有更好的解决方案。

正确对齐我的页面标题

2 个答案: