1

我是一名“中级”CSS 用户，但我遇到了一个似乎无法解决的问题，尽管我怀疑答案会非常容易从更了解 CSS 的人那里得到解决......

我有一个日期的简单视觉表示，其标记是：

<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 ......不要认为这会造成任何问题，但可能会改变人们的想法。任何帮助将不胜感激。

4

4 回答 4

2

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

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

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

您还可以分配不同的显示类型，而block不是div诸如inline-block. 但是，由于h1包含“Today”也是一个block元素（block元素总是从新行开始），因此您也需要将其设置display: inline-block;为。

.ember-view {
    display: inline-block;
}
.ember-view + h1 {
    display: inline-block;
}
于 2013-09-29T11:26:16.140 回答
1

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

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

于 2013-09-29T11:21:58.887 回答
1

问题在于，除了整个小部件位于 a 内之外div，Today文本位于h1标签内，并且默认情况下两者都是block级别元素。

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

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

CodePen 演示

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

于 2013-09-29T11:25:18.873 回答
0

如果你把

#ember419{
    display:inline-block;
}

和

h1{
    display:inline-block;
}

有用

inline-block

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

于 2013-09-29T11:27:26.050 回答