Question

以下是js小提琴

<div style="width:200px">
    <span class="span-blankPDF">
        <label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving:</label>
    </span>
    <div class="div-PDF" style="display: inline;width: 50px;">Reason  to  livelong</div>
</div>

我想要的结果是这样的，上面的div宽度不应该增加。

Reason for leaving:Reason  
                   to  livelong

Answer 1

我认为这就是你要找的东西：

http://jsfiddle.net/BY294/

<div style="width:200px">
<span class="span-blankPDF" style="float:left">
    <label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving :</label></span>
    <div class="div-PDF" style="display: block;width: 50px; float:left">Reason to livelong</div>
    </div>

定位他们宝贝！

你希望跨度向左浮动，因此它有一个参考点，然后你希望下一个div作为一个块作为它自己的实体，并且浮动，留下“倾斜”。在你的跨度..

否则我完全误解了这个问题，在这种情况下我不应该受到指责！ :)

Answer 2

假设您的span元素应该保持为span并且div内部应该保持为div，那么您可以使用一些CSS做得很好。

默认情况下，使用display: inline-block摆脱span和div定位的方式。然后使用vertical-align: top使同一行中的元素在其容器顶部对齐。

因此，在不更改宽度（按照您的要求）并只添加一些CSS的情况下，您可以这样写：

<div style="width:200px;">
    <span class="span-blankPDF" style="display:inline-block;vertical-align:top;">
        <label for="Employments_2b6131a8-d5c3-40d6-85f7-ecec0d315e56__ReasonForLeaving">Reason for Leaving</label>
    </span>
    <div class="div-PDF" style="display:inline-block;width:50px;vertical-align:top;">Reason  to  livelong</div>
</div>

这里有现场演示：http://jsfiddle.net/Vg6RG/

编辑你得到的结果是 Pogrindis ，但这个结果并没有使用浮动。

Div内容在同一行

2 个答案: