Question

创建一个名为top div的包装div，得到一个名为Title的p标签，左边是另一个名为buttonCP的div，包含4个p标签，与中心对齐，边距为0 auto。现在我想要一个名为Button5的最终p标签在顶部div中向右对齐，但似乎无法做到。检查元素显示buttonCP margin auto可以将最终的p标签推出包装器div。知道如何将Button5与Title和buttonCP放在同一行吗？提前谢谢！

这是jsfiddle链接： https://jsfiddle.net/6r6jzypy/

<style> #topdiv {
background-color: #F0F0F0;
height: 40px;
width: 100%;
border: 2px solid #D8D8D8;
float:left;
}
p[name=heading] {
    margin: 0;
    font-weight: bold;
    padding: 10px 8px 6px 8px;
    float:left;
    font-size: 1.0em;
}
#Result {
    margin: 0;
    float: right;
}
.button1 {
    background-color: #D8D8D8;
    margin-top: 3px;
    float: left;
    padding: 6px 8px 6px 8px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border: 2px solid #D8D8D8;
    border-right: 1px;
}
.button2 {
    background-color: #D8D8D8;
    margin-top: 3px;
    float: left;
    padding: 6px 8px 6px 8px;
    border: 2px solid #D8D8D8;
    border-right: 1px;
}
.button3 {
    background-color: #D8D8D8;
    margin-top: 3px;
    float: left;
    padding: 6px 8px 6px 8px;
    border: 2px solid #D8D8D8;
    border-right: 1px;
}
.button4 {
    background-color: #D8D8D8;
    margin-top: 3px;
    float: left;
    padding: 6px 8px 6px 8px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 2px solid #D8D8D8;
}
#buttonCP {
    height: 34px;
    width: 290px;
    margin: 0 auto;
}
</style>

<body>
    <div id="topdiv">
        <p name="heading">Title</p>
        <div id="buttonCP">
            <p class="button1">Button1</p>
            <p class="button2">Button2</p>
            <p class="button3">Button3</p>
            <p class="button4">Button4</p>
        </div>
        <p id="Result">Button5</p>
    </div>
</body>

Answer 1

试试这个：

<div id="topdiv">
<p name="heading">Title</p>
<p id="Result">Button5</p>  
<div id="buttonCP">
    <p class="button1">Button1</p>
    <p class="button2">Button2</p>
    <p class="button3">Button3</p>
    <p class="button4">Button4</p>
</div>


</div>

<强> Live demo

自动保证金推送p标签

1 个答案: