Я хочу отобразить список пользовательских карт, используя директиву ng-repeat
, но он сохраняет вертикальное отображение.
<style>
li{
display: inline
}
</style>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li ng-repeat="x in names">
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title" id="dani">{{x}}</span>
<p id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Что я делаю не так?
ОБНОВИТЬ:
display: inline-flex;
устраняет проблему, но ставит объекты один за другим в одной строке. Я хочу перейти к следующей строке, если скажем, 4 объекта, так как я могу настроить это?
Обновление 2: вот чего я хочу достичь:
поэтому после того, как 3 карты отображались горизонтально, линия увеличивалась :)
Проблема в том, что ваш повтор находится в позиции. Вы буквально говорите, что хотите его вертикально. Переместите повтор в тег span, вам также может потребоваться добавить отображение встроенного блока и задать ширину вашего диапазона. Попробуй это:
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div ng-init="names=['Jani','Hege','Kai']">
<ul >
<li>
<div class="row">
<div class="col s12 m2 20 " >
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span style="display:inline-block; width:100px" ng-repeat="x in names" class="card-title" id="dani">{{x}}<br>
<span style="display:inline-block" id="p">I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</span></span>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Вот Плункер. Сообщите мне, если это не то, что вы пытались сделать.
для использования тега li с плавающей влево
li {
float: left;
}
addy для ul add list-style-type: none;
display: inline-flex;
к вашему элементуul
.