如何正確使用display：inline with ng repeat

我想製作一個時間表，但它已經破壞了結構。我認爲這是因爲display:inline，如果我想這樣做對我的網站：如何正確使用display：inline with ng repeat

它會打破它：

顯示inline-block的也funks起來。

我試圖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-重複：

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

感謝您的幫助！

來源

2016-01-26 user5812721

試試這個方法：

試試這個

<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

或

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

來源

2016-01-26 02:41:07

這並沒有幫我，謝謝雖然 – user5812721

解決：

製造與NG-將鼠標懸停在類的div然後顯示它inline-block的

來源

2016-01-26 16:34:18 user5812721

如何正確使用display：inline with ng repeat

回答

相關問題