【问题标题】:Not able to get this link alligned properly无法正确对齐此链接
【发布时间】:2013-07-25 02:37:21
【问题描述】:

编辑:我不是 Html 专业人士。

我想添加这段文字:

AIM -> Historian

AIM -> AIM

AIM -> PI

Historian -> PI

完全对齐,就像上面图片中的一样。它是所有这些文本的一个链接。

我尝试过<p style ="text-indent:5em;,也尝试过制作<ul style ="text-indent:5em;,但间距仍然很奇怪,不是我想要的。如您所见,上面有一个不需要的空白区域,并且文本对齐不正确。

守则

<div class="tabContentBorders">
<div id="tab1">
<p><strong>Data Acquisition and Reporting</strong></p>
<p>        <a href="IOM_AssetPerformanceManagement.html">High-Speed Data Acquisition</a></p>
<p>        <a href="IOM_RealTimeBusinessIntelligence.html">Custom Driver Development</a></p>
<p>        <a href="IOM_Real-TimeProfitOptimization.html">Custom Reporting Solutions</a></p>
<p><strong>15)  Historian Migration</strong></p>
<p style ="text-indent:5em;">        <a href="IOM_EnterpriseControl.html"></a><br>AIM -> Historian<br>AIM -> AIM<br>AIM -> PI<br>Historian -> PI</p>
<p><strong>Custom Windows Application</strong></p>
<p>        <a href="consultingandservices_solutionconsulting_regulatorycomplianceconsulting-2.html">SOE/TRA Suite</a></p>
<p>        <a href="ConsultingandServices_SolutionConsulting_SafetyLifecycleServices.html">TCP Time-Sync</a></p>
<p>        <a href="IOM_ProductionEnergyManagement.html">Power Calculations</a></p>

</div>

样式表

body { background: #000 url("../images/background.jpg") no-repeat center top; }
body, h1, h2, h3, h4, h5, h6, ol, ul, li, p, td { font-family: Verdana, Geneva, Tahoma, sans-serif; color: #fff; font-weight: normal; }

.frame { z-index: 10; margin-left: auto; margin-right: auto; width: 970px; margin-bottom: 20px; position: relative;}

/*  CSS grid credit 960 Grid System http://960.gs  */
/*  Must declare this for all containers with widths in the layout grid so they properly align alongside of each other  */
.leftCol, .rightCol, .headerBox, .shadedBox ul, .rightSplitCol
    { display:inline; float:left; margin-left:0; margin-right:0; }

.topBox { display: block; height: 82px; background: url("../images/header.jpg") no-repeat left top; margin-bottom: 18px; }
.topNav { margin:0; padding:0; float: right; position: relative; top: 10px; right: 10px; text-align: right; font-size: 13px; }
.topNav a:link, .topNav a:visited { color: #fff; text-decoration: none; } .topNav a:hover { text-decoration: underline; }

.leftCol { width: 515px; } 
.leftCol .box { margin: 15px 20px !important; }
.rightCol { width: 435px; margin-left: 20px; } .rightSplitCol { width: 232px; margin: 5px 0 0 0; } .splitColspace { margin-left: 10px;}
.rightSplitCol p { font-size: 13px !important; padding: 0 0 5px 0; }

.mission { padding: 10px 0 0 10px;}
.headerBox { color: #000; margin-bottom: 5px; padding: 5px 20px 5px 10px; font-size: 18px; } .headerBoxPink { color: #000; margin-bottom: 10px; padding: 5px 20px 5px 10px; font-size: 15px; background-color: #d81c3f; }
.boxBlue { background-color: #00b9e4;} .boxOrange { background-color: #e87511;} .boxGreen { background-color: #c3cf21;}

.shadedBox { background: url("../images/bkgrdBox.png") repeat; }  .venue { margin-bottom: 9px; padding: 7px !important; } .boxMargin { padding: 7px;}
.shadedBox a:link, .shadedBox a:visited { color: #c3d603; } .shadedBox a:hover, .shadedBox a:visited:hover { text-decoration: none; }
.shadedBox ul { list-style: disc; padding: 7px 0 5px 10px; font-size: 13px;  } .shadedBox li { padding-bottom: 0.75em; line-height: 1.4em;}
ul.leftSide { width: 200px; margin-left: 15px; margin-right: 0;}  ul.rightSide { width: 210px; margin-left: 18px; margin-right: 0;}
.shadedBox p { font-size: 14px; line-height: 1.2em; }  .venue p { line-height: 1.3em !important; }

.small{ color: #ccc; font-size: 12px; }  .big { font-size: 26px; padding-top: 5px;}
.button { float: right; }
.iconSubscribe { float: right; padding: 25px 0 0 5px;}  .iconOpen { float:left; padding: 0 10px 0 0;}
a.whiteLink { color: #fff !important; } 


.footer { background: url("../images/footerDots.png") no-repeat left top; margin: 10px 0 10px 20px;}
.footer p { font-size: 11px; margin-top: 20px;}
.brands { background-color: #636466; display:inline; float:right; color: #000; padding: 5px 10px; font-size: 13px;}
.brands a:link, .brands a:visited { color: #000; text-decoration:none; }  .brands a:hover, .brands a:visited:hover { text-decoration:none; }

/*  960 Grid System: Clear style used with various floated containers  */
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after {clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix {display:inline-block}
* html .clearfix{height:1%}
.clearfix {display:block}

【问题讨论】:

  • 你能发布任何相关的样式表吗?弄清楚它来自哪里的填充真的很有帮助。此外,如果您有更改标记和样式表的余地,我有一些建议可以使您的代码更具语义/更适合您想要做的事情。
  • 我添加了一个样式表,但我不确定它是否正确。
  • 来自 aspx 的网站,我认为我无法访问样式表。
  • 不是这样的。如果它是一个实时网页,那么有一个链接会有所帮助。否则,请尝试使用 Firefox 或 Google Chrome 的“检查元素”上下文选项(右键单击文本)来查看填充的来源(如果开发人员模式打开,Safari 中存在相同的选项)。

标签: html css cellpadding


【解决方案1】:

我建议对基本代码进行简单的重写。在这里,我使用H3 作为标题,并针对段落。除非您使用white-space:pre,否则空白将始终折叠到一个空格的宽度。

代码可以清理更多,段落标签更少,但这里有一个快速的想法。

http://jsfiddle.net/Ufx58/1/

HTML

<div class="tabContentBorders">
<div id="tab1">
<h3>Data Acquisition and Reporting</h3>
<p>        <a href="IOM_AssetPerformanceManagement.html">High-Speed Data Acquisition</a></p>
<p>        <a href="IOM_RealTimeBusinessIntelligence.html">Custom Driver Development</a></p>
<p>        <a href="IOM_Real-TimeProfitOptimization.html">Custom Reporting Solutions</a></p>
<h3>15)  Historian Migration</strong></h3>
<p style ="text-indent:5em;">        <a href="IOM_EnterpriseControl.html"></a><br>AIM -> Historian<br>AIM -> AIM<br>AIM -> PI<br>Historian -> PI</p>
<h3>Custom Windows Application</h3>
<p>        <a href="consultingandservices_solutionconsulting_regulatorycomplianceconsulting-2.html">SOE/TRA Suite</a></p>
<p>        <a href="ConsultingandServices_SolutionConsulting_SafetyLifecycleServices.html">TCP Time-Sync</a></p>
<p>        <a href="IOM_ProductionEnergyManagement.html">Power Calculations</a></p>

</div>

CSS

h3{
    font-weight:bold;
    font-size:1.2em;
}

#tab1 p{
    padding-left:2em;
}

【讨论】:

  • 来自 aspx 的网站,我认为我无法访问样式表。
  • 谢谢,但是如何在 main.css 中添加 css 代码?即我在哪里添加它?我可以在 main.css 中的任何位置添加它吗?
  • 嗯,我的简单样式可能会与已经存在的样式发生冲突,但是是的。您可以在任何地方添加它,假设没有级联(或定义了更强的继承)。您可能需要稍微命名它(通过代码中的类或更具体的选择器)。
【解决方案2】:

我就是这样做的,而且效果很好

<p><strong>Data Acquisition and Reporting</strong></p>
<p style="padding-left : 2em;"><a href="IOM_AssetPerformanceManagement.html">High-Speed Data Acquisition</a></p>
<p style="padding-left : 2em;"><a href="IOM_RealTimeBusinessIntelligence.html">Custom Driver Development</a></p>
<p style="padding-left : 2em;"><a href="IOM_Real-TimeProfitOptimization.html">Custom Reporting Solutions</a></p>
<p><strong>Historian Migration</strong></p>
<p style="padding-left : 2em;"><a href="IOM_EnterpriseControl.html">
AIM -> HistorianAIM -> AIM<br>
AIM -> PI<br>
Historian -> PI<br>
</a>
</p>
<p><strong>Custom Windows Application</strong></p>
<p style="padding-left : 2em;"><a href="consultingandservices_solutionconsulting_regulatorycomplianceconsulting-2.html">SOE/TRA Suite</a></p>
<p style="padding-left : 2em;"><a href="ConsultingandServices_SolutionConsulting_SafetyLifecycleServices.html">TCP Time-Sync</a></p>
<p style="padding-left : 2em;"><a href="IOM_ProductionEnergyManagement.html">Power Calculations</a></p>

【讨论】:

  • 您绝对应该尝试将焦点从这样的内联样式转移。如果你到处都这样做,它很快就会变得难以管理。
  • 我完全同意你的观点,但正如我所说,这个网站最初是 aspx ,现在是 html。如果我没有更清楚地说明我需要快速修复并且不想使用我不知道位置的 css 文件,我很抱歉。如果我有点菜鸟,也很抱歉。
  • Right clickview source,搜索.css。以正确的方式进行修复与添加“快速”破解并没有太大区别。 :)
猜你喜欢
  • 2014-02-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-04-24
  • 2013-09-11
  • 1970-01-01
相关资源
最近更新 更多