将div元素放在一行显示

Question

我想制作一个时间轴，但它的结构已经被破坏了。我认为这是由于display:inline引起的，如果我尝试在我的网站上这样做，它会导致网站崩溃。 display: inline-block也会出现问题。

我尝试将display: inline应用于包含时间轴的overall div，但无效。然后我将其应用于时间轴中的所有div，但还是不行。

时间轴：

<span class = "timelinefull">
    <div ng-controller="MainController">
        <div class="timeline">              
            <!-- ANCHOR DOT -->
            <div class= "dot">
                <div ng-mouseover="infoIsVisible = true" ng-mouseleave="infoIsVisible = false"   ng-mouseover="getCoords(event)">
                    <img class="icon" ng-src="img/icon_dot.png" height="30px" width="30px">
                </div> 
                <div class="info label label-info" id="info" ng-show="infoIsVisible">
                    <p>Was born</p>
                </div>
            </div>

            <!-- REST OF MY DOTS -->

            <div class="dot" ng-repeat="timelineEvent in timelineEvents">
                <timeline-info info="timelineEvent"></timeline-info>
            </div>          
        </div>
    </div>
</span>

ng-repeat的模板：

<div class="timeline-inner" ng-init="infoIsVisible= false">
    <img class="line" src="components/timeline/template-timeline/img/line.png" height="5px" width="{{ info.months }}">
    <div ng-mouseover="infoIsVisible = true" ng-mouseleave="infoIsVisible = false"   ng-mouseover="getCoords(event)">
        <a href="{{ info.link }}">
            <img class="icon" id="icon" ng-src="{{ info.icon }}" height="30px" width="30px">
        </a>
    </div> 
</div>

<div class="info label label-info" id="info" ng-show="infoIsVisible">
    <p>{{ info.description }}</p>
    <p style="font-size: 8px"> Click for more info </p>
</div>

CSS

.timelinefull {
    display: inline;
}

.timeline-inner {
    display: inline;
}

.info {
    display: inline;
    padding-top: 10px;
    position: absolute;
    z-index: 100;
    -webkit-transition:all linear 0.3s;
    transition:all linear 0.3s;
}

.line {
    box-shadow: 0 0 0 2px rgba(0,0,0,.05);
    margin-left: -5px;
    margin-right: -5px;
}

.info.ng-hide {
    opacity:0;
}

a:link {
    text-decoration: none;
}

感谢您的帮助！

- user5812721

---

你尝试过使用 inline-block 吗？它是一个神奇的组合。 - b3tac0d3

请提供相关的标记和CSS，完整地。 - Peyman Mohamadpour

@Trix https://jsfiddle.net/x9odh9ee/ 不确定如何使angular在fiddle上正常工作。另外，在橙色框中，您知道为什么底部的阴影跨度不完全横跨底部吗？ - user5812721

请注意，不要放置太多的脚本链接，而是分享水平“点”和其他内容的完整HTML，而不仅仅是说“<!-- REST OF MY DOTS -->”。同时提供相关的CSS。 - Peyman Mohamadpour

问题不在Angular上，只是标记不完整。让我们在聊天中继续。 - Peyman Mohamadpour

Answer 1

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

.timeline, .timeline .dot, .timeline-inner, .timelinefull {
    display:inline-block;
}
.timeline, .timelinefull {
    width:100%;
}

更新：

没有代码片段的情况下，这只是猜测。

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

.dot .timeline-inner {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

以上代码将垂直居中.timeline-inner。从您的截图来看，似乎因为元素现在是display-inline，它们只占据所需的空间（正确的行为），但是您需要元素在timeline中垂直居中对齐。

- mani

---

@user5812721，您能否发布一个带有生成的HTML和合并CSS的fiddle（http://jsfiddle.net）？ - mani

https://jsfiddle.net/x9odh9ee/ 不确定如何在 fiddle 上正确运行 angular。此外，在橙色框中，您知道为什么底部的阴影跨度没有完全横跨底部吗？ - user5812721

Answer 2

在CSS中，display属性有三个选项：

行内元素（Inline elements）：

1. 尊重左右外边距和填充，但不尊重上下外边距和填充。
2. 不能设置宽度和高度。
3. 允许其他元素位于其左侧和右侧。

块级元素（Block elements）：

1. 尊重所有这些样式。
2. 在块级元素后强制换行。

行内块级元素（Inline-block elements）：

1. 允许其他元素位于其左侧和右侧。
2. 尊重上下外边距和填充。
3. 尊重宽度和高度。

因此，最好将以下类的元素设置为display:inline-block：

• dot
• timeline-inner

像这样：

timeline dot, timeline timeline-inner{
    display: inline-block;
}

请不要忘记花足够的时间提供你的代码的摘要版本，包括Markup和CSS，以便让人们重新生成最终结果。

- Peyman Mohamadpour

---

内联元素会遵循垂直填充、边框和外边距。但是，在计算行框高度时，只使用 line-height。 - Oriol

@Oriol 谢谢你的观点，但我非常确定垂直边距，即top和bottom，不适用于内联元素。 - Peyman Mohamadpour

内联元素很棘手。从技术上讲，它们接受垂直边距，请参见计算高度-内联。但是事实上，它们通常不会被注意到，因为它们不影响行框的高度，并且在边框边缘之外。如果实现在边距边缘之外绘制轮廓，则它们将在该实现中变得明显。 - Oriol

我在尝试这个时遇到了与尝试Mani的建议时相同的问题：http://imgur.com/xWttfv5 - user5812721