Dieser Link kann nicht richtig ausgerichtet werden

Question

Bearbeiten:Ich bin kein HTML-Profi.

Ich möchte diesen Text hinzufügen :

AIM -> Historian

AIM -> AIM

AIM -> PI

Historian -> PI

Perfekt ausgerichtet wie die oben im Bild.Es ist ein Link mit all diesem Text.

Ich habe es versucht <p style ="text-indent:5em; und ich habe auch versucht, eine zu machen <ul style ="text-indent:5em; aber der Abstand ist immer noch komisch und nicht das, was ich will.Wie Sie sehen, befindet sich darüber ein leerer Bereich, der nicht benötigt wird und die Textausrichtung nicht korrekt ist.

Codes

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

Stylesheet

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}

Answer 1

Ich würde ein einfaches Umschreiben des Basiscodes vorschlagen.Hier benutze ich eine H3 für die Überschriften und zielen Sie auf die Absätze ab.Es sei denn, Sie verwenden white-space:pre Leerraum wird immer auf die Breite eines Leerzeichens reduziert.

Der Code kann mit weniger Absatz-Tags mehr bereinigt werden, aber hier ist eine kurze Idee.

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

Answer 2

So tat ich es und es funktioniert

generasacodicetagpre.