将div元素内联

Question

我想制作一个时间表,但它已经破坏了结构.我认为这是因为display:inline,如果我试图这样做到我的网站,它会破坏它. display: inline-block也搞砸了.

我试着去包含时间线display: inline的overalldiv,但是没有用.所以我对所有同样在时间轴上的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;
}

谢谢您的帮助!

Answer 1

您有 3 个选项可供选择displayCSS 中元素的属性：

内联元素：

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

块元素：

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

内联块元素：

1. 允许其他元素位于其左侧和右侧
2. 尊重顶部和底部边距和填充
3. 尊重高度和宽度

因此，最好将display:inline-block元素放入这些类中：

• 点
• 时间线内部

像这样：

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

请不要忘记投入足够的时间来提供代码的总结但有用的版本，包括标记和CSS，以便人们重现最终结果。