Отображение списка карт по горизонтали, HTML / CSS с Angular и MaterializeCSS

0

Я хочу отобразить список пользовательских карт, используя директиву 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: вот чего я хочу достичь: Изображение 174551

поэтому после того, как 3 карты отображались горизонтально, линия увеличивалась :)

  • 1
    попробуйте добавить display: inline-flex; к вашему элементу ul .
Теги:
materialize

2 ответа

0

Проблема в том, что ваш повтор находится в позиции. Вы буквально говорите, что хотите его вертикально. Переместите повтор в тег 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>

Вот Плункер. Сообщите мне, если это не то, что вы пытались сделать.

  • 0
    Похоже, карты помещаются одна поверх другой, поэтому, к сожалению, это решение не работает :(.
  • 0
    Я не был уверен, куда должен был попасть абзац "р", поэтому я поместил его под именами. Ваш вопрос не был ясен на 100%, но вы должны использовать этот пример, чтобы получить то, что вам нужно. Если нет, вы можете показать картинку именно того, что вы хотите, даже если она жестко запрограммирована. Я пытаюсь вам помочь, но я не совсем уверен, что именно вам нужно. Я привел вам два примера в «Плункере», потому что думал, что они помогут.
0

для использования тега li с плавающей влево

li {
 float: left;
}

addy для ul add list-style-type: none;

  • 0
    к сожалению, это не решает проблему :(

Ещё вопросы

Сообщество Overcoder
Наверх
Меню