html - 右浮动在我的情况下不起作用，我该怎么办？

Question

大家好，如图所示，如果我使用右浮动，手机图像将位于汉堡包图标之后。

除了一直使用边距外，我应该如何将电话图标放在汉堡包图标之前？

    <div class="top_nav" style="position:fixed; width=100%;">
    <div class="top_nav_menu top_nav_left_log_part">
        <a href="index.html" style="padding:auto;">
            <img id="img_nav_left_png" src="img/fujitsu.svg" alt="" style="height:80px; width=83px;padding-top:17px;padding-bottom:23px;">
        </a>
    </div>
    <div id="top_nav_menu_middle_id" class="top_nav_menu top_nav_menu_middle">
        <ul class="top_nav_ul">
            <li class="top_nav_li nav_menu"><a href="services.html" data-toggle="tooltip" data-placement="left" title="Database migration and consulting services">Services</a></li>
            <li class="top_nav_li nav_menu"><a href="support.html" data-toggle="tooltip" data-placement="left" title="24/7 and business hours support options for PostgreSQL users">Support</a></li>
            <li class="top_nav_li nav_menu"><a href="training.html" data-toggle="tooltip" data-placement="left" title="Training courses for DBAs and developers">Training</a></li>
            <li class="top_nav_li nav_menu"><a href="product.html" data-toggle="tooltip" data-placement="left" title="FUJITSU Enterprise Postgres and PostgreSQL">Product</a></li>
            <li class="top_nav_li nav_menu"><a href="solutions.html" data-toggle="tooltip" data-placement="left" title="End-to-end PostgreSQL solutions">Solutions</a></li>
            <li class="top_nav_li nav_menu"><a href="contact.html" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Contact</a></li>
        </ul>
    </div>
    <div class="top_nav_menu top_nav_contact_part">
        <ul class="top_nav_ul">
            <li id = "top_nav_phone_log_li" class="top_nav_li" >
                <a href="tel://+6194549191" style="padding-top:25px;">
                    <img id="img_nav_phone_png" src="img/phone_icon.svg" alt="" style="height:100%; margin-left:20px; width:26px;height:30px;">
                </a>
            </li>
            <li id = "top_nav_phone_number_li" class="top_nav_li  "><a href="tel://+6194549191" class="number">+61 2 9454 9191</a></li>
        </ul>
    </div>
    <div class="top_nav_menu top_nav_right_log_part">
        <ul class="top_nav_ul">
            <li class="top_nav_li top_nav_right_log">
               <img id="img_nav_right_png" src="img/PostgreSQL.svg" alt="Contact-number" style="height:40px;width:175px;">
            </li>
            <li class="hamberger_icon">
                <a href="javascript:void(0);" onclick="myFunction()" id="hamberger">&#9776;</a>
            </li>
        </ul>
    </div>

</div>

谢谢

CSS 代码

.top_nav {
    margin: 0px 0px 0px 0px;
    height: 80px;
    width: 100%;
    position: fixed;
    top: 0px;
    background-color: #ffffff;
    z-index: 1;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-bottom-color: #F7F9F8;
}

.top_nav_menu {
    margin: 0px 0px 0px 0px;
    /*  border-style: solid;*/
    border-color: red;
    float: left;
    height: 80px;
    vertical-align: top;
}

.top_nav_left_log_part {
    margin-left: 30px;
    margin-right: 20px;
}

.top_nav_right_log_part {
    float: right;
}

ul.top_nav_ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    /*    background-color: #333;*/
}

li.top_nav_li {
    float: left;
    height: 80px;
    /*    border-style: solid;*/
}

li.top_nav_li a {
    display: inline-block;
    /*    color: white;*/
    text-align: center;
    padding-top: 25px;
    /*    padding-left: 16px;*/
    /*    padding: 10px 16px;*/
    text-decoration: none;
    transition: 0.3s;
}

li.nav_menu:hover:not(.active) {
    background-color: #eeeeee;
}

li.nav_menu_active {
    border-bottom-color: #ff0000;
    border-bottom-style: solid;
    border-bottom-width: 4px;
}

li.top_nav_li a:hover:active {
    /*    background-color: red;;*/
}

li.nav_menu a {
    font-size: 20px;
    color: #322f31;
    margin-left: 20px;
    margin-right: 20px;
}

li#nav_menu_show {
    display: none;
}

li#nav_menu_show a:hover:not(.active) {
    background-color: red;
}

img#img_nav_left_png,
img#img_nav_right_png,
img#img_nav_phone_png {
    display: block;
    /*  width: 25px; */
    margin: auto;
}

li.top_nav_right_log {
    float: right;
    margin-right: 10px;
    padding-top: 20px;
    display: none;
}

ul.top_nav_ul li.icon {
    display: none;
}


/*hamberger size*/

#hamberger {
    font-size: 30px;
    margin: 0;
}

.icon {
    margin-top: 15px;
}

.number {
    margin-left: 10px;
}

li.hamberger_icon {
    float: right;
    margin-right: 10px;
    padding-top: 17px;
    display: none;
}

@media screen and (max-width:1170px) {
    /*  .top_nav_contact_part{
  display:none;
  }*/
    li.nav_menu a {
        font-size: 20px;
        color: #322f31;
        margin-left: 10px;
        margin-right: 10px;
    }
    .top_nav_left_log_part {
        margin-left: 20px;
        margin-right: 10px;
    }
    .top_nav_right_log {
        margin-right: 0px;
    }
    id#img_nav_phone_png {
        margin-left: 100px;
    }
}

@media screen and (max-width:1160px) {
    .top_nav_menu_middle {
        width: 100%;
        display: none;
        position: fixed;
        top: 80px;
    }
    li.nav_menu {
        background-color: grey;
        float: none;
    }
    li.top_nav_right_log {
        display: none;
    }
    li.hamberger_icon {
        font-size: 30px;
        display: block;
        float: right;
        margin-right: 10px;
    }
}

@media screen and (min-width:1165px) {
    li.top_nav_right_log {
        display: block;
    }
    li.nav_menu {
        float: left;
    }
    /*    .top_nav_menu_middle{
      display: block;
    }*/
}

.top_nav_menu_middle_display {
    display: block;
}


/*Navi Responsive */


/* When the screen is less than 768 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */


@media screen and (max-width:800px) {
  .top_nav_menu_middle{
    display: none;
  }
 #top_nav_phone_number_li{
  display:none;
  }/*
  .top_nav_contact_part{

      : right;

    }
*/

  ul.top_nav_ul li.top_nav_right_log{
    display: none;
  }
  ul.top_nav_ul li.hamberger_icon {
    float: right;
    display: block;
  }
}

Answer 1

我建议为此使用 Flexbox。

您的 html 看起来像这样:

<div class="navigation-bar">
   <div class="telephone"></div>
   <div class="hamburger-menu-icon"><div>
</div>

你的 CSS 看起来像这样:

.navigation-bar {
  display: flex;
  flex-direction: row;
  justify-content: end;
}

.telephone {
  order: -1;
}

justify-content: end; 有点像 float: right;当您告诉 .telephone 有 order: -1; 时，您告诉它位于其他元素 (hamburger-menu-icon) 的前面。

flexbox 指南: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果您愿意，我可以创建一个代码笔。让我知道!