创建水平堆叠格

我创建一个网站，并正尝试通过侧（水平）堆栈4 div元素侧创建水平堆叠格

http://i40.tinypic.com/28tkuq8.png

上面的图片是它是如何当前出现。

而且这是我希望它看起来：http://i44.tinypic.com/2h3v8ue.png

这是我的HTML代码我使用：

<div id="linkscontainer" align="center"> 
    <div id="1"> 
     <a href="link">1</a> 
    </div> 
    <div id="2"> 
     <a href="link">2</a> 
    </div> 
    <div id="3"> 
     <a href="link">3</a> 
    </div> 
    <div id="4"> 
     <a href="link">4</a> 
    </div> 
</div>

我的CSS：

#linkscontainer { 
    marin-left: auto; 
    margin-right: auto; 
    width: 800px; 
    height: 60px; 
} 

#1 { 
    background-color: #3B5998; 
    height: 60px; 
    width: 25%; 
    font-family: 'Nixie One', cursive; 
    color: #F0F0F0; 
    font-size: 24px; 
    text-align: center; 
    line-height: 60px;  
} 

#2 { 
    background-color: #00B5B5; 
    height: 60px; 
    width: 25%; 
    font-family: 'Nixie One', cursive; 
    color: #F0F0F0; 
    font-size: 24px; 
    text-align: center; 
    line-height: 60px;  
} 

#3 { 
    background-color: #F78F10; 
    height: 60px; 
    width: 25%; 
    font-family: 'Nixie One', cursive; 
    color: #F0F0F0; 
    font-size: 24px; 
    text-align: center; 
    line-height: 60px;  
} 

#4 { 
    background-color: #EF0E11; 
    height: 60px; 
    width: 25%; 
    font-family: 'Nixie One', cursive; 
    color: #F0F0F0; 
    font-size: 24px; 
    text-align: center; 
    line-height: 60px;  
}

任何帮助非常感谢:)

谢谢

来源

2013-12-13 Tim

使用'＃1，＃2，＃3，＃4 {display：inline-block}'。 – Vucko

div缺省为block级元素，序并排他们堆面，你需要或者float他们，或者你需要使用display: inline-block;

注意：您id值是无效的，你不能开始一个id名称与的数字。

Demo

#linkscontainer > div { 
    float: left; 
}

我已经改变了尺寸25%到20%完全适合的内容。

如果您正在使用display: inline-block;会比你需要寻找出白色空间修复，如果你与float去，不是不要忘记用clear: both;属性来清除它们。

建议：好像你是一个导航菜单，让你更好使用nav下嵌套ul和li元素。

来源

2013-12-13 11:41:10

注释+1。 – Ruddy

@Ruddy谢谢你，这很重要:) –

感谢您的帮助。在发布到这里时，我只是将ID名称更改为数字。这不是一个导航菜单。我留下了一些细节，因为我想尽我所能努力克服困难，但是这一个，我只是无法解决问题。非常感谢您的帮助！非常感谢！ – Tim

你有两个选择，要么float the elements，或将其更改为display inline，使用：

float:left; - 或 - display:inline; - 或 - display:inline-block;

我建议你看看this article关于浮动，以及关于内联元素（内联块）的this one。

这两个属性都会达到你以后的结果，但他们的行为和目的各不相同 - 确保你选择最合适的。

div默认情况下，元素是块级别（它们会导致垂直内容中的“中断”）发生更改以使内联显示删除此中断，以便后续内联内容相邻嵌套。

通过设置float，可以使前后的内容在元素周围流动 - 在这种情况下，内容也会浮动，因此它会相邻显示。

来源

2013-12-13 11:39:07 SW4

大坝它再次击败了我... +1 -.- – Ruddy

@Ruddy ...道歉！ – SW4

@ user2586348在这种情况下，为了阻止元素中断到新行，您需要将它们放在父元素中，并将其宽度设置为至少使子元素显示在一行上的最小可能值。 – SW4

创建水平堆叠格

回答

相关问题