HTML对齐文本

我要像以下列方式显示页面上的文本：HTML对齐文本

My Text: Text Here 
My Text: More Text Here......................................................... 
     Text from line above continued here.

我有以下的标记只是为了测试：

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

当这是呈现大约一半的文本显示在相应的“标签”类div下面。我希望所有文字都出现在“标签”div的右侧。

来源

2010-06-10 nevillejones

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

来源

2010-06-10 18:18:29 RedFilter

-1

这是因为你用浮法

float: left;

浮子抬起元素（就好像是浮动），并让其他人去下。无论如何不需要它。

虽然

如果我试试你的代码here它工作正常。

编辑

没看到您的编辑！

使用

form div .text{ 
    margin-left: 160px; 
}

来源

2010-06-10 18:14:42 nebkat

您的示例不起作用。 – 2010-06-10 18:17:12

加浮动：左;到你的分区。

来源

2010-06-10 18:15:37 NibblyPig

如果你这样做，确保你在右边的div上设置一个宽度，否则他们会绕到下一行。 – MikeWyatt 2010-06-10 18:18:21

使用表格。哈哈。开玩笑。不要这样做。

既然你是被硬编码的标签的宽度，你可以简单地给你的文字稍微较大的值的左页边距：

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) */ 
}

来源

2010-06-10 18:15:41 MikeWyatt

您可以使用填充左上第二个div：

<div class="label">...</div> 
<div style="padding-left: 200px">...</div>

来源

2010-06-10 18:19:32 Anax

你要调整标签的高度：

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>

来源

2010-06-10 18:19:37

这种方法的缺点是它依赖于从不超过100px高的正确方块。 – MikeWyatt 2010-06-10 18:21:52

@MikeWyat或者您指定的任何人，都同意。我在我的个人网站上使用这种方法很多。如果有人有更好的解决方案，请发布，我很乐意更新我的代码！ – 2010-06-10 18:59:57

回答

相关问题