Question

所以我得到了200乘200的div列表，但它们是垂直显示的现在我非常希望我的整个网站像地铁ui一样水平驱动

body {
    background-color: blue;
}

div {
    display: inline;
    background-color:black;
    width: 200px;
    height: 200px;
    margin: 10px;
    padding: 5px;
    border: solid 2px yellow;
}

如果我应用display：inline，它们都缩小了???为什么 DO：取消注释显示：内联;在jsfiddle css中看到

http://jsfiddle.net/uVY5V/3/

什么是将所有内容放在水平或内联的好方法

Answer 1

将white-space: nowrap提供给body标签并将display: inline-block提供给div标签就可以了。

Working Fiddle

Answer 2

内联元素不能具有设置的宽度或高度。

块元素不能并排（float作弊：p）

display:inline-block是两全其美的;）

Answer 3

您可以将text-align: justify用于div.wrapper，然后您可以将display:inline-block用于div列表。像这样：

HTML

<div class="wrapper">
  <div id="search_tile" class="search_tile"></div>
    <div id="timeline_tile" class="timeline_tile">  </div>
    <div id="conversations_tile" class="conversations_tile"></div>
    <div id="source_tile" class="source_tile"></div>
    <div id="11_tile" class="demo_11_tile"></div>
    <div id="14_tile" class="demo_14_tile"></div>
    <div id="12_tile" class="demo_12_tile"></div>
    <div id="13_tile" class="demo_13_tile"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
</div>

CSS

body{
background-color: blue;
}
.wrapper {
  letter-spacing: -4px;
  word-spacing: -4px;
  font-size: 0;
  text-align: justify;
}
.wrapper:after {
  content:"";
  display:inline-block;
  width: 100%;
}

.wrapper div{  
    font-size: 16px;
    letter-spacing: normal;
    word-spacing: normal;
    display:inline-block;
    *display: inline;
    zoom:1;
    background-color:black; 
    width: 200px; 
    max-width: 200px;
    height: 200px; 
    margin: 10px; 
    padding: 5px; 
    border: solid 2px yellow;
    -webkit-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    -moz-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    -ms-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    -o-transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
    transition: max-width 500ms ease-in-out, height 500ms ease-in-out;
}
.wrapper .placeholder {
  width: 200px;
  height: 0;
  border: none;
  background:none;
}

请查看demo。如果您有兴趣，可以点击here和here。

Answer 4

取决于你想要的。这将使它们水平移动直到宽度结束。 JsFiddle

HTML：

<div id="search_tile" class="search_tile"></div>
<div id="timeline_tile" class="timeline_tile"></div>
<div id="conversations_tile" class="conversations_tile"></div>
<div id="source_tile" class="source_tile"></div>
<div id="11_tile" class="demo_11_tile"></div>
<div id="14_tile" class="demo_14_tile"></div>
<div id="12_tile" class="demo_12_tile"></div>
<div id="13_tile" class="demo_13_tile"></div>

CSS：

body
{
background-color: blue;
width:100%;
}

div{  
    /*display: inline;*/
    display:inline-block;
    background-color:black; 
    width: 200px; 
    height: 200px; 
    margin: 10px; 
    padding: 5px; 
    border: solid 2px yellow;

}

Answer 5

我们一直在使用花车进行布局，因为我们离开了桌子。这是一个奇怪的解决方案，往往会带来麻烦，但如果你知道你在做什么，它就有效。

人们最近越来越多地转向浮动的一个有趣的替代方法是将元素的显示值设置为内联块。

div{  
        display: inline-block;
        background-color:black; 
        width: 200px; 
        height: 200px; 
        margin: 10px; 
        padding: 5px; 
        border: solid 2px yellow;

    }

Answer 6

您可以通过以下几种方式解决此问题：

将display: inline;更改为display: inline-block，如图所示here
如图所示here

float: left;

将所有内容保持原样并向您的div添加一些内容，如图所示here

CSS - 如何水平对齐div？

6 个答案:

HTML

CSS