使用UL时避免使用换行符

Question

我是一个“中级”CSS用户但是我遇到了一个我似乎无法解决的问题，即使我怀疑从那些了解更多关于css的人那里得到的答案也很容易解决...... / p>

我有一个日期的简单直观表示，标记是：

<ul class="visual-date">
    <li class="day-of-week text-muted">
        {{view.dayOfWeek}}
    </li>
    <li class="day-of-month">
        {{view.dayOfMonth}}
    </li>
</ul>

显示以下内容：

使用以下CSS：

.visual-date {
    list-style-type: none;
    width: 85px;
    text-align: center;
    padding: 5px 1px 5px 1px;
    .day-of-week {
        background-color: #272927;
        color: white;
        font-size: 8pt;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        border-width: 1px;
        border-color: #CBCDCA;
        border-style: solid;
    }
    .day-of-month {
        font-size: 24pt;
        border-width: 1px;
        border-color: #CBCDCA;
        border-style: solid;
    }
}

这似乎有效，但我正在努力的是当我放置这个小部件时，我无法得到随后的文本在同一水平线上，而是总是掉到下一行。这是完整的代码示例：

http://codepen.io/kensnyder/full/uBAsl

所以明确地说，我想要的是“今天”文本直接位于可视日期小部件的右侧。注意，我正在使用Bootstrap 3.0 ...不要认为这会产生任何问题，但可能会改变人们的想法。任何帮助将不胜感激。

Answer 1

它下降到下一行，因为ul位于div内，这是block元素，这意味着它填满了其容器的整个宽度。在block元素之后放置任何东西。

您可以使用float元素上的block来解决此问题，以使其位于您希望其围绕的内容的左侧或右侧。在float: left;上使用div会将其浮动到左侧;但是，水平线也会围绕它流动。您需要在水平线元素上应用clear: left;，以便停止环绕左浮动元素。

.ember-view {
    float: left;
}
hr {
    clear: left;
}

您还可以将block以外的其他显示类型分配给div，例如inline-block。但是，由于包含“今天”的h1也是block元素（block元素始终从新行开始），因此您需要将其设置为display: inline-block;同样。

.ember-view {
    display: inline-block;
}
.ember-view + h1 {
    display: inline-block;
}

Answer 2

您的<ul>被div包装，默认情况下是一个块级元素，因此它会将所有其他元素推送到底部。

你需要做的就是给这个div：display: inline-block

Answer 3

问题是除了整个小部件位于div内之外，Today文本位于h1标记内，并且两者都是默认block级元素

将以下内容添加到您的CSS中。

h1{
  display: inline-block;
}
#ember419{
  display: inline-block;
}

CodePen Demo

编辑：正如评论中指出的那样，#ember419似乎是由EmberJS动态分配的id，因此将其用作选择。为了解决这个问题，我们可以使用class属性创建单独的display: inline-block并将其附加到必需的元素。

Answer 4

如果你把

#ember419{
    display:inline-block;
}

和

h1{
    display:inline-block;
}

它有效

inline-block

  

使元素生成内联级块容器。该   内联块内部被格式化为块框和元素   本身被格式化为原子内联级别框。