Html 将div元素内联

我想做一个时间表，但它已经打破了结构。我认为这是因为

display:inline

，如果我试图对我的站点这样做，它会破坏它。

display:inline块

也会让它变得更恐怖

我试图

display:inline

到包含时间线的

otheral

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>

---

谢谢你的帮助

尝试将以下内容添加到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%);
}

---

上述代码将垂直居中

。时间线内部
。从您的角度看，似乎是因为元素现在是
显示内联的
，它们只占用所需的空间（正确的行为），但是，您需要元素在
时间线内垂直居中对齐
 您有3个选项可供选择，用于CSS中元素的
display
属性：

内联元素：

尊重左右边距和填充，但不尊重顶部和底部
不能设置宽度和高度

允许其他元素位于其左侧和右侧
块元素：

尊重所有这些
在块元素之后强制换行
内联块元素：

允许其他元素位于其左侧和右侧
尊重上下页边距和填充
尊重高度和宽度
因此，对于具有以下类的元素，最好放置
display:inline block
：


圆点
时间轴内部

像这样：

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

请不要忘记花足够的时间提供代码的摘要版，尽管很有用，包括标记和CSS，让人们重现最终结果。
您是否尝试过
内联块
？这是一个神奇的组合请提供相关的标记和css，completely@Trix不知道如何让角在小提琴上正常工作。另外，在橙色框中，你知道为什么底部的阴影跨度没有完全横跨底部吗？请小心，不要放那么多脚本链接，只需共享水平
点的完整HTML以及其他内容，而不要只说
。同时提供相关的CSS@Trix所有的css都在那里，这是一个个人笔记，所有其他的点都是通过ng repeat制作的。我只需要一个定位点，因为ng重复是一行，然后是后面的点。内联元素考虑垂直填充、边框和边距。但是，在计算线框的高度时，仅使用
线高度
。@Oriol tanx表示该点，但我非常确定
垂直边距
、
顶部
和
底部
，内联元素不被接受。内联元素很棘手。从技术上讲，他们接受垂直利润，参见。但从视觉上看，它们通常是不明显的，因为它们不影响线框的高度，并且位于边界边缘之外。在一个在边距边缘以外而不是边框边缘绘制轮廓的实现中，它们会很明显。我在尝试这一点时遇到了与我在尝试mani建议时遇到的问题相同的问题：@user5812721你能用生成的html和组合css发布一个fiddle（）吗？不知道如何让角度正确地在fiddle上工作。在橙色框中，你知道为什么底部的阴影跨度没有完全跨越底部吗？
.dot .timeline-inner {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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