HTML Aligning Text
I want to display text on a page like in the following way:
My Text: Text Here
My Text: More Text Here.........................................................
Text from line above continued here.
I have the following markup just to test:
<html>
<head>
<style type="text/css">
body {
font-family: arial;
}
form div {
padding: 3px;
}
form .label {
float: left;
text-align: right;
width: 150px;
margin-right: 8px;
}
</style>
</head>
<body>
<form>
<div class="label">My Text:</div>
<div>Aenean tellus diam, pharetra sed posuere sed, ullamcorper eget enim. Suspendisse quis posuere nisi. Integer sodales neque id erat luctus suscipit. Curabitur in nisi arcu. Curabitur suscipit tellus non lectus blandit non mollis risus aliquet. Proin et felis nulla. Integer ut felis nibh, eu condimentum elit. Sed tincidunt fermentum lorem, convallis ornare ipsum mattis sed. Vestibulum vel quam sed velit condimentum volutpat eu sed enim. Duis tincidunt, turpis id suscipit molestie, erat tort开发者_JS百科or tincidunt augue, eu venenatis erat neque nec nisi. Nunc malesuada bibendum elit eu bibendum.</div>
<div class="label">My Text 2:</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit arcu ut risus dapibus tincidunt et ut orci. Vestibulum vitae urna in ligula fringilla facilisis aliquet vel nisl. Quisque placerat risus eget arcu fermentum at consectetur arcu lobortis. In hac habitasse platea dictumst. In in libero non justo pellentesque cursus quis non nisi. Donec sit amet pharetra ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla enim enim, fringilla vitae sodales id, ultrices non lacus. Etiam id augue ut dui convallis hendrerit. Vivamus urna justo, dignissim in suscipit eu, facilisis a libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. .</div>
</form>
</body>
When this is rendered about half the text is displayed underneath the corresponding "label" class div. I would like all the text to be appear to the right of the "label" div.
<html>
<head>
<style type="text/css">
body {
font-family: arial;
}
div {
border: 1px solid red;
}
form div {
padding: 3px;
}
form .label {
float: left;
text-align: right;
width: 150px;
margin-right: 8px;
}
form .content {
float: left;
width: 450px;
}
</style>
</head>
<body>
<form>
<div class="label">My Text:</div>
<div class="content">Aenean tellus diam, pharetra sed posuere sed, ullamcorper eget enim. Suspendisse quis posuere nisi. Integer sodales neque id erat luctus suscipit. Curabitur in nisi arcu. Curabitur suscipit tellus non lectus blandit non mollis risus aliquet. Proin et felis nulla. Integer ut felis nibh, eu condimentum elit. Sed tincidunt fermentum lorem, convallis ornare ipsum mattis sed. Vestibulum vel quam sed velit condimentum volutpat eu sed enim. Duis tincidunt, turpis id suscipit molestie, erat tortor tincidunt augue, eu venenatis erat neque nec nisi. Nunc malesuada bibendum elit eu bibendum.</div>
<br style="clear:both">
<div class="label">My Text 2:</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit arcu ut risus dapibus tincidunt et ut orci. Vestibulum vitae urna in ligula fringilla facilisis aliquet vel nisl. Quisque placerat risus eget arcu fermentum at consectetur arcu lobortis. In hac habitasse platea dictumst. In in libero non justo pellentesque cursus quis non nisi. Donec sit amet pharetra ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla enim enim, fringilla vitae sodales id, ultrices non lacus. Etiam id augue ut dui convallis hendrerit. Vivamus urna justo, dignissim in suscipit eu, facilisis a libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. .</div>
</form>
</body>
add float:left; to your div css.
Use a table. Ha ha. Just kidding. Don't do that.
Since you are hard-coding the width of the labels, you could simply give your text a left margin of a slightly-larger value:
form div {
/* ...existing styles... */
margin-left:160px;
}
form .label {
/* ...existing styles... */
margin-left: 0px; /* cancel out margin-left (or you could re-arrange your classes to make this unnecessary) */
}
You can use padding-left on the second div:
<div class="label">...</div>
<div style="padding-left: 200px">...</div>
You have to adjust the height of the label:
form .label {
float: left;
text-align: right;
width: 150px;
margin-right: 8px;
}
...
<div class="label" style="height:100px;">My Text 2:</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit arcu ut risus dapibus tincidunt et ut orci. Vestibulum vitae urna in ligula fringilla facilisis aliquet vel nisl. Quisque placerat risus eget arcu fermentum at consectetur arcu lobortis. In hac habitasse platea dictumst. In in libero non justo pellentesque cursus quis non nisi. Donec sit amet pharetra ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla enim enim, fringilla vitae sodales id, ultrices non lacus. Etiam id augue ut dui convallis hendrerit. Vivamus urna justo, dignissim in suscipit eu, facilisis a libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. .</div>
It's because you used float
float: left;
float lifts the element(as if it was floating) and lets others go underneath. There is not need for it anyway.
ALTHOUGH
If I try your code here it works fine.
EDIT
Didn't see your edit!!
Use
form div .text{
margin-left: 160px;
}
加载中,请稍侯......
精彩评论