我如何将这两个元素放在同一行上？

Question

我有一个小提琴，虽然对某些人来说不是很基本 ，但小提琴中的两个元素应分别位于各自的div（和跨度）中-它们每个都有一个display: block并且它们的text-align是左或右，取决于它们在包含元素中的位置。 我似乎无法解决某些问题，例如position relative; top: 10px （大致）- 是如何使它们位于同一行上。即.text-one和.text-two应该位于同一行上，并且都“对齐”到元素的一侧。 我可以在一个div中完成所有操作，但是您希望看到它们时，将它们放在单独的“容器”中。

有什么想法吗？ 我相信这很简单，但是我无法终生解决。

Answer 1

小提琴

如果要使用display:block请使用inline-block以及50％的width ，或者最好在.text-one上使用float:left

Answer 2

http://jsfiddle.net/sLj65/6/

.box .text-one{
    float:left;
    text-align: left;
}

.box .text-two{
    float:right;
    text-align: right;
}

display:block; 表示如果未设置浮点数，则它们将不会出现在同一行上，为此，必须将它们浮向任一侧。 我还要添加max-width:50%; 如果您打算向每个.box元素添加更多文本，请选择。

Answer 3

您可以通过简单地浮动元素来做到这一点。

的CSS

.box{
    border: 1px solid #333;
    padding: 14px 27px 10px 15px;
    min-height: 60px;
    min-width: 60px;
}

.box .text-one{
    display: block;
    text-align: left;
    float:left;
}

.box .text-two{
    display: block;
    text-align: right;
    float:right;
}

http://jsfiddle.net/sLj65/7/