Question

我想制作一个时间轴，但它已经破坏了结构。我认为那是因为<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"> <script src="Authors.js"></script> </head>，如果我试图这样做到我的网站：

它会打破它：

显示内联块也很有趣。

我尝试display:inline到包含时间轴的display: inline div，但这不起作用。所以我对所有同样在时间轴上的div也这样做了。

时间轴：

overall

ng-repeat的模板：

<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

<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>

感谢您的帮助！

Answer 1

尝试这种方式：

试试这个

<div ng-repeat="friend in friends" style="float:left">
   {{friend.name}} who is {{friend.age}} years old.
</div>

OR

<span ng-repeat="friend in friends">
    {{friend.name}} who is {{friend.age}} years old.
</span>

默认情况下DIV呈现为display:block，SPAN呈现为display:inline-block

OR

<span class="col-sd-4" ng-repeat="it in elem.tags">

Answer 2

解决：

使用ng-mouseover类将div设置为inline-block

如何正确使用显示：内联ng重复

2 个答案: