Question

我有一个fiddle, that while basic to some对我来说不是很好，小提琴中的两个元素都在他们自己的div（和span）中，因为它们应该是 - 它们每个都有一个display: block和它们的{ {1}}可以根据它们在包含元素中的位置而向左或向右。这个问题我似乎无法弄清楚做出某种hacky css，比如text-align和position relative;（粗略地） - 是如何让它们在同一行上那个是top: 10px，.text-one应位于同一行，两者都与元素的一侧“对齐”。我可以在一个div中完成所有操作，但是我希望它们在你看到的单独的“容器”中。

思考？我相信这很简单，但我无法理解我的生活。

Answer 1

<强> FIDDLE

如果您想使用inline-block

，请使用width和float:left 50％或更好地使用.text-one display:block

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/

我如何在同一条线上制作这两个元素？

3 个答案:

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

CSS