0

在我的 HTML 中，我试图在标题的项目符号旁边对齐一个标题，以便标题的第一行总是在项目符号旁边，而第二行（如果有的话）不会改变标题的位置 - 它只是跟踪到下一行。

JSF中：

http://jsfiddle.net/Ebqq8/

HML：

<div class="bullet-container">
    <div class="bullet-title-container">
        <div class="circle-container">
            <div class="circle"></div>
        </div>
        <p class="bullet-title">Short Title</p>
    </div>
    <div class="bullet-details-container">
        <p>Body Text</p>
    </div>
</div>

CSS：

.circle-container {
    height: 34px;
    display: inline-block;
    position: relative;
    width: 14px;
    border: 1px solid blue;
}
.circle {
    border-radius: 50% !important;
    width: 12px;
    height: 12px;
    background-color: red;
    display: inline-block;
    position: absolute;
    top: 0px;
    /* width and height can be anything, as long as they're equal */
}
.bullet-title {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    min-height: 34px;
    width: 200px;
    margin: 0px;
}
.bullet-title-container {
    color: black;
    display: inline-block;
    position: relative;
    width: 250px;
}
.bullet-details-container {
    color: black;
}
.bullet-container {
    max-width: 600px;
    float: left;
    text-align: left;
}

现在发生的情况是第一行总是太低，如果有多行，整个标题就会被推得太高。我认为对齐两个 inline-block 元素可以解决问题，但它似乎不起作用。我究竟做错了什么？

4

1 回答 1

2

您可以尝试添加：

position: absolute;
top: 0;

至.bullet-title { }

http://jsfiddle.net/Ebqq8/2/

于 2013-10-26T17:59:06.067 回答