Question

我试图将一些图像保存在一行。我正在使用bootstrap和图像，还包括响应类。

在12张图像之后，新行已为图像的其余部分创建。 但我希望所有图片都保持一行。

我的代码格式为

<ul class="people">
    <li><a><img ></a>
    <li><a><img ></a>
</ul>

任何形式的帮助将不胜感激。感谢

Answer 1

在12张图像之后，新行已为图像的其余部分创建。但是我希望所有图像保持一行。

无论有多少，这些图像都会保留在一行中。

＆＃13;

.people li {
  display: inline;
  white-space: nowrap
}

＆＃13;

<ul class="people">
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
    <li><a><img src="http://lorempixel.com/100/100/sports" ></a>
</ul>

＆＃13;

Answer 2

twitter-bootstrap中最简单的方法是类row whit div

   <div  class="row">

       <div><a><img src='your_img_1' ></a></div>
       <div><a><img src='your_img_2'></a></div>
       <div><a><img src='your_img_3'></a></div>
   </div>

或者如果您需要<ul class="list-inline">中的图像，则需要内联块样式或者用于img

img {
  border: 0 none;
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

Answer 3

请查看此Plunker。

HTML code：

<ul class="people">
  <li>
    <a><img src="http://blue-engineering.nl/wp-content/uploads/2014/10/Slider-blue.png"></a>
  </li>
  <li>
    <a><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Red_flag.svg/2000px-Red_flag.svg.png"></a>
  </li>
</ul>

CSS代码：

img{
  width: 50px;
  height: 50px;
}

li{
  display: inline-block;
  list-style-type: none;
}

希望这是你要求的：）

Answer 4

试试这个：

li{
    display: inline-block;
}

Answer 5

您可以使用显示或浮动代码。

示例：

li{
  display:inline-block;
}

OR

li{
  float:left;
}

但最好使用显示代码。因为如果你想使用浮动代码，那么你需要在完成浮动后添加一个清晰的代码..

示例：

<ul class="people">
    <li><a><img ></a>
    <li><a><img ></a>
</ul>
<div class="people2">
your stuff... here
 </div>

CSS

li{
  float:left;
}
.people2 {
  clear:both
}

所以......我认为最好使用 display：inline-block

Answer 6

您可以使用

    li
    {
    display:inline-block;
    }

在12张图像之后，新的行已为图像的其余部分创建

    li:nth-child(12n)
    {
    clear:both;
    }

如何将多个图像保存在一行中？

6 个答案: