CSS第一个和最后一个子元素

我在一个div中渲染2个按钮，并且想要向左和向右浮动一个按钮。CSS第一个和最后一个子元素

我以为我可以使用：第一，孩子最后：子元素，但似乎对CSS的：第一胎运行，并且然后在写的：最后一子标签

我还使用尝试：第n个孩子（1）选择

下面是一个例子：http://www.bootply.com/elg2cP9Usp

编辑：正确的工作代码，感谢所有：

<div class="container"> 
    <button type="button" class="btn btn-default 1">On</button> 
    <button type="button" class="btn btn-default 2">Off</button> 
</div> 

/* CSS used here will be applied after bootstrap.css */ 
.container { 
     width: 100%; 
     padding 25px 40px; 
    } 

    .container > .btn { 
     min-width: 35%; 
    } 

    .container > .btn:first-child { 
     float: left; 
    } 

    .container > .btn:last-child { 
     float: right; 
    }

来源

2015-12-10 chinds

您的联系似乎是错误的 - 链接一个新的脚本上bootply :) –

哈哈只注意到并添加正确的链接。 – chinds

请将相关的[MCVE]代码添加到您的问题;不要只是链接到它或外部网站一旦死亡，翻倒或重新组织它的内容，这个问题就失去了所有的价值，并变得毫无意义（最好）。 –

/* CSS used here will be applied after bootstrap.css */ 
 

 
.container { 
 
    width: 100%; 
 
    padding 25px 40px; 
 
} 
 
.container > .btn { 
 
    min-width: 35%; 
 
} 
 
.btn:first-child { 
 
    float: left; 
 
} 
 
.btn:last-child { 
 
    float: right; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <button type="button" class="btn btn-default">On</button> 
 
    <button type="button" class="btn btn-default">Off</button> 
 
</div>

错误的方法的好友，目标按钮.. !!

来源

2015-12-10 13:57:22

完美谢谢。 – chinds

:first-child表示法是一种误导。你需要直接将它应用到你的.btn类。

为了得到期望的结果尝试：

.container .btn:first-child { 
    float: left; 
} 

.container .btn:last-child { 
    float: right; 
}

为了避免任何按键组，以这样的表现我缩小了选择到.container .btn。

这是您的updated example。

来源

2015-12-10 13:57:35 Daniel

完美谢谢。 – chinds

您可能想要使用first-of-type和last-of-type选择器，这些选择器允许您按类型选择元素; button在这种情况下：

.container button:first-of-type { 
    float: left; 
} 

.container button:last-of-type { 
    float: right; 
}

A fork of your code is here.

来源

2015-12-10 14:00:59

CSS第一个和最后一个子元素

回答

相关问题