向右浮动时按钮的顺序会发生变化。怎么解决这个问题？

Question

当我向右浮动几个按钮时，这些按钮的顺序会发生变化。 我上传了图片，你可以看到我的意思。 Navbar image

这是我正在使用的代码。

.btn{
    float: left;
    padding: 1.7em;
    text-align: center;
    display: inline-block;
    border: none;
    cursor: pointer;
    color: white; 
}
.navbar{
    float: left;
    background-color: #47476b;
}
.btnff{
    -webkit-transition-duration: 0.7s;
    transition-delay: 0.1s;
}
.btnff:hover{
    background-color: black;
}
.active{
    background-color: limegreen;
}
.right{
    float: right;
}

<div>
            <button class="btn btnff navbar active" type="submit">Button 1</button>
            <button class="btn btnff navbar" type="submit">Button 2</button>
            <button class="btn btnff navbar" type="submit">Button 3</button>
            <button class="btn btnff navbar" type="submit">Button 4</button>
            <button class="btn btnff navbar" type="submit">Button 5</button>
            <button class="btn btnff navbar" type="submit">Button 6</button>
            <button class="btn btnff navbar" type="submit">Button 7</button>
            <button class="btn btnff navbar right" type="submit">Button 8</button>
            <button class="btn btnff navbar right" type="submit">Button 9</button>
        </div>

如何以正确的顺序获得按钮9和8？如何让按钮的颜色拉伸整个屏幕的宽度，这样我就不会在左右按钮之间得到白色空间？

Answer 1

你可以使用text-align，只浮动你想要左对齐的那个。

你必须处理空白区域。在下面的代码片段中，我使用评论来摆脱它。

＆＃13;

＆＃13;

.btn{
    float: left;
    padding: 1.7em;
    text-align: center;
    display: inline-block;
    border: none;
    cursor: pointer;
    color: white; 
}
.navbar{
    float: left;
    background-color: #47476b;
}
.btnff{
    -webkit-transition-duration: 0.7s;
    transition-delay: 0.1s;
}
.btnff:hover{
    background-color: black;
}
.active{
    background-color: limegreen;
}
.right{
    float: none;
}
div {text-align:right;}

＆＃13;

<div>
            <button class="btn btnff navbar active" type="submit">Button 1</button>
            <button class="btn btnff navbar" type="submit">Button 2</button>
            <button class="btn btnff navbar" type="submit">Button 3</button>
            <button class="btn btnff navbar" type="submit">Button 4</button>
            <button class="btn btnff navbar" type="submit">Button 5</button>
            <button class="btn btnff navbar" type="submit">Button 6</button>
            <button class="btn btnff navbar" type="submit">Button 7</button>
            <button class="btn btnff navbar right" type="submit">Button 8</button><!-- 
                   comment to kill white-space from code indentation 
         --><button class="btn btnff navbar right" type="submit">Button 9</button>
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改HTML中右侧浮动按钮的顺序。将类添加到包含div并使用overflow: auto，以便在包含浮动子元素时不会崩溃。

＆＃13;

＆＃13;

.buttons {
    background: #000;
    overflow: auto;
}
.btn{
    float: left;
    padding: 1.7em;
    text-align: center;
    display: inline-block;
    border: none;
    cursor: pointer;
    color: white; 
}
.navbar{
    float: left;
    background-color: #47476b;
}
.btnff{
    -webkit-transition-duration: 0.7s;
    transition-delay: 0.1s;
}
.btnff:hover{
    background-color: black;
}
.active{
    background-color: limegreen;
}
.right{
    float: right;
}

＆＃13;

<div class="buttons">
            <button class="btn btnff navbar active" type="submit">Button 1</button>
            <button class="btn btnff navbar" type="submit">Button 2</button>
            <button class="btn btnff navbar" type="submit">Button 3</button>
            <button class="btn btnff navbar" type="submit">Button 4</button>
            <button class="btn btnff navbar" type="submit">Button 5</button>
            <button class="btn btnff navbar" type="submit">Button 6</button>
            <button class="btn btnff navbar" type="submit">Button 7</button>
            <button class="btn btnff navbar right" type="submit">Button 9</button>
            <button class="btn btnff navbar right" type="submit">Button 8</button>
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以围绕2个按钮制作一个容器，让容器向右浮动。

.btn{
    float: left;
    padding: 1.7em;
    text-align: center;
    display: inline-block;
    border: none;
    cursor: pointer;
    color: white; 
}
.navbar{
    float: left;
    background-color: #47476b;
}
.btnff{
    -webkit-transition-duration: 0.7s;
    transition-delay: 0.1s;
}
.btnff:hover{
    background-color: black;
}
.active{
    background-color: limegreen;
}
.float-container{
    float: right;
}

        <div>
            <button class="btn btnff navbar active" type="submit">Button 1</button>
            <button class="btn btnff navbar" type="submit">Button 2</button>
            <button class="btn btnff navbar" type="submit">Button 3</button>
            <button class="btn btnff navbar" type="submit">Button 4</button>
            <button class="btn btnff navbar" type="submit">Button 5</button>
            <button class="btn btnff navbar" type="submit">Button 6</button>
            <button class="btn btnff navbar" type="submit">Button 7</button>
            <div class="float-container">
                <button class="btn btnff navbar" type="submit">Button 8</button>
                <button class="btn btnff navbar" type="submit">Button 9</button>
            </div>
        </div>

Answer 4

这可以通过flexbox非常有效地完成，没有浮动：

将DIV容器定义为flex容器（display: flex），从按钮8和9中删除float: right并将margin-left: auto分配给按钮8（这将从那里移动到右端的所有内容）。在下面的代码中，我通过添加的课程.x和.y

完成了这项工作

.btn{
    float: left;
    padding: 1.7em;
    text-align: center;
    display: inline-block;
    border: none;
    cursor: pointer;
    color: white; 
}
.navbar{
    float: left;
    background-color: #47476b;
}
.btnff{
    -webkit-transition-duration: 0.7s;
    transition-delay: 0.1s;
}
.btnff:hover{
    background-color: black;
}
.active{
    background-color: limegreen;
}
   .x {
  display: flex;
   }
   .y { 
   margin-left: auto; 
   }

<div class='x'>
            <button class="btn btnff navbar active" type="submit">Button 1</button>
            <button class="btn btnff navbar" type="submit">Button 2</button>
            <button class="btn btnff navbar" type="submit">Button 3</button>
            <button class="btn btnff navbar" type="submit">Button 4</button>
            <button class="btn btnff navbar" type="submit">Button 5</button>
            <button class="btn btnff navbar" type="submit">Button 6</button>
            <button class="btn btnff navbar" type="submit">Button 7</button>
            <button class="btn btnff navbar y" type="submit">Button 8</button>
            <button class="btn btnff navbar" type="submit">Button 9</button>
        </div>