Question

这是我的代码：

<style type="text/css">
    div.page {
      text-align:center;
      border: 1px solid rgb(0,0,0);
      width:20px;
      height:20px;              
    }

    span.page {
      text-align:center;
      border: 1px solid rgb(0,0,0);
      width:20px;
      height:20px;              
    }
 </style>


<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>

<span class="page">1</span>
<span class="page">2</span>
<span class="page">3</span>

Div看起来很好但是它们垂直放置。有没有办法将它们水平放在一行？

跨度在一行中的位置，但跨度不能具有任何内联元素的宽度。如果没有办法使用DIV和SPAN来完成我的任务，我将使用一个表，但我正在寻找无表解决方案。

Answer 1

xandy是正确的，但这更好：

<div class='pageHolder'>
    <div class='page'>1</div>
    <div class='page'>2</div>
    <div class='page'>3</div>
</div>

使用CSS：

.page {
  text-align:center;
  border: 1px solid rgb(0,0,0);
  width:20px;
  height:20px;              
  float: left;
}

.pageHolder{
  overflow: auto;
  width: 100%;
}

清除浮动的元素是标记。这就像使用<br>但是对于浮点数。混合标记和内容在语义网中被认为是不好的做法。

阅读this article了解详情。

Answer 2

Lorenzo的回答是正确的，但我会在标记中添加一些内容：

<div class='pageHolder'>
    <div class='page'>1</div>
    <div class='page'>2</div>
    <div class='page'>3</div>
    <div class='pageHolder-footer'></div>
</div>

在CSS中

，添加：

div.pageHolder-footer{
    clear: left;
    height: 0;
}

这样你的其他东西就会正常流动。

==替代方法（来自Jan，SitePoint）==

无需div.pageHolder-footer（但保留pageHolder）。然后：

div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */

它们都有缺点，但这取决于你需要什么。

Answer 3

Lorenzo的回答是正确的，但我会在标记中添加一些内容：

<div class='pageHolder'>
    <div class='page'>1</div>
    <div class='page'>2</div>
    <div class='page'>3</div>
    <div class='pageHolder-footer'></div>
</div>

在CSS中

，添加：

div.pageHolder-footer{
    clear: left;
    height: 0;
}

这样你的其他东西就会正常流动。

==替代方法（来自Jan，SitePoint）==

无需div.pageHolder-footer（但保留pageHolder）。然后：

div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */

它们都有缺点，但这取决于你需要什么。

Answer 4

使用此

div.page {
    text-align:center;
    border: 1px solid rgb(0,0,0);
    width:20px;
    height:20px;              
    float: left;
}

Answer 5

使用display:inline;，你的div将在一行中。

其他解决方案：float:left;

Answer 6

使用display：table-cell;它将以水平顺序解决你的div对齐问题。

<div class="content">
   <div> Page1</div>
   <div>Page 2</div>
   <div>Page 3</div>
</div>

CSS

 .content > div{
     display: table-cell;
  }

Answer 7

您可以尝试将ul / li与list-style（css属性）组合为none。

有点像

<ul> <li> <div ....</li> <li><div...></li></ul>

或

你可以在div中的table / tds内尝试。

Div在一条线上

7 个答案: