css - 使用水平滚动制作元素的正确方法

Question

fiddle :http://jsfiddle.net/WsYw8/

我在说什么的演示:http://netkoder.dk/test/test0251.html

HTML

<div class="spotlysholderholder baggrundlinear1 bordertype1 borderradius5px">

   <div class="spotlysholderholderb" style="width: 3200px;">
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <a href="/" class="spotlysholder background_color_2 fontsize_xsmall fontfamily_1 bordertype1 borderradius5px"><img src="test0251_filer/billed0001.png" alt="Notepad++" class="spotlysbillede"><span class="">NOTEPAD++</span>er et tekstredigeringsprogram du kan bruge til at skrive dine koder</a>
      <div class="clearboth"></div>
   </div>

</div>

CSS

  .spotlysholderholder {
      overflow-x: auto;
   }

   .spotlysholderholderb {
      padding: 4px;
      margin: 0 auto;
   /*   width: 800px;*/
   }

   .spotlysholderholderb a,
   .spotlysholderholderb a:visited,
   .spotlysholderholderb a:active {
      color: #222;
   }

   .spotlysholder {
      text-align: center;
      width: 180px;
      float: left;
      margin: 4px;
      padding: 5px;
      text-decoration: none;

      /* for at undgå at langeordudenmellem ikke går ud over kanten */
      overflow: hidden;
      text-overflow: ellipsis;
   }

   .spotlysholder:hover {
      background: #ccc;
      text-decoration: underline;
      border-color: black;
   }

   .spotlyoverskrift {
      display: block;
      font-weight: bold;
      color: maroon;
   }

   .spotlysbillede {
      margin: 5px auto;
      vertical-align: bottom;
   }

   .baggrundlinear1 {
      background-color: #445263; /* fallback */
      box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), inset -2px 0 2px rgba(0, 0, 0, 0.2), inset 0 -2px 2px rgba(0, 0, 0, 0.2), inset 2px 0 2px rgba(255, 255, 255, 0.4);
   }


   .bordertype1 {
      border: 1px solid #7c7c7c; /* fallback farve når rgba ikke virker */
      border: 1px solid rgba(0,0,0,0.5);
      border: 1px solid rgba(0,0,0,0.25);
   }

   .background_color_2 {
      background-color: #ddd; /* fallback */
   }

   .borderradius5px {
      border-radius: 5px;
   }

   .spotlysbillede {
      margin: 5px auto;
      vertical-align: bottom;
   }

   .clearboth {
      clear: both;
   }

我有一个包含 16 个框的滚动元素。

每个框的宽度为 200 像素，包括内边距。

为了让它们都在同一条线上，我将父容器 elemenet 设置为 16 * 200 像素宽。如果有 16 个盒子，我将其设为 3200 像素宽。

我有两个问题。

1 : 我怎样才能避免设置父容器元素的宽度并且仍然让所有的框在同一行上？

2 : 当我使用浏览器缩小时，最后一个框向下跳成 2 行。

Answer 1

在不知道整体宽度的情况下将所有盒子排成一行的最简单的解决方案是使用 display: inline-block连同white-space: nowrap;而不是 float 元素。这在缩放时不会中断。使用 <body> -元素只是一个例子。您也可以使用像 <div class="spotlysholderholderb"> 这样的包装器(坚持你的例子)应用相同的样式，当你的页面只有一部分应该水平滚动时。

HTML

<div>
    <img src="http://placehold.it/200x100" alt="">
    <p>Box 1</p>
</div>

<div>
    <img src="http://placehold.it/200x100" alt="">
    <p>Box 2</p>
</div>

CSS

body {
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

div {
    display: inline-block;
    width: 200px;
    font-size: 14px;
    line-height: 20px;
}

演示

Try before buy

Try before (centered horizontally)