Простой CSS: как исправить отображение: встроенная проблема

Question 1

Отчасти смущает вопрос, но я новичок в CSS, и я просто хотел добавить простое отображение: встроенный стиль для элемента списка HTML. Список состоит из различных тегов заголовков, абзацев, изображений и ссылок, и я просто не могу разместить их все в одной строке.

Это все соответствующие части моего кода, надеюсь, кто-нибудь сможет указать на простое исправление.

HTML

<ul>
    <li>
      <h3>Quantity</h3>
    </li>

    <li>
      <p>#</p>
    </li>

    <li><img onclick="addQuantity('itemName')" src="images/plus.png"></li>

    <li>
      <h3>1</h3>
    </li>

    <li><img onclick="minusQuantity('itemName')" src="images/minus.png"></li>

    <li>
      <h2>Add To Cart</h2>
    </li>

    <li>
      <h4><a href="#checkout.html">Checkout</a></h4>
    </li>
  </ul>

CSS

ul {
  list-style-type:none;
}

li {
  display:inline;
}

css inline

2

Ben N 17 Авг 2014 в 02:49

Answer

Простой вопрос, простой ответ :)

Используйте inline-block

Есть пример!

CSS

li {
  display:inline-block;
}

Теперь, благодаря CSS, есть множество способов добиться желаемого макета. Вот более подробный пример использования display: table и display: table-cell. Тот же HTML.

Есть второй пример!

CSS

* {
    margin: 0;
    padding: 0;
}
html,body {
    height: 100%;
}
ul {
  list-style-type:none;
    display: table;
    border-collapse: collapse;
    border-spacing: 10px;
    background: #333;
    width: 100%;
}

li {
  display:table-cell;
    background: #DDD;
    vertical-align: middle;
}

1

misterManSam 17 Авг 2014 в 03:01

Question 2