Question

我想在页面上显示文字，如下所示：

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下面。我希望所有文本都显示在“label”div的右侧。

Answer 1

添加浮动：左;你的div css。

Answer 2

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

由于您正在对标签的宽度进行硬编码，因此您可以简单地为文本提供稍微大一点的左边距：

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

Answer 3

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

Answer 4

你可以在第二个div上使用padding-left：

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

Answer 5

您必须调整标签的高度：

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>

Answer 6

这是因为你使用了浮动

float: left;

浮动提升元素（就好像它是浮动的）并让其他人进入下面。无论如何都没有必要。

虽然

如果我尝试使用您的代码here，则可以正常使用。

修改

没看到你的编辑!!

使用

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

HTML对齐文本

6 个答案: