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;时，你告诉它在其他元素前面（汉堡菜单图标）。

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

如果您希望我可以创建一个codepen。让我知道！

Answer 2

你可以使flex看起来像这样：

[电话符号] [-------------- flex-spacer --------------] [汉堡符号]

HTML：

<div class="container">
    <div class="symbol">
        phone symbol
    </div>
    <div class="flex-spacer">
    </div>
    <div class="symbol">
        hamburger symbol
    </div>
</div>

CSS：

.container {
    display: flex;
    flex-direction: row;
}
.symbol {
    flex-grow: 0;
    flex-shrink: 1;
}
.flex-spacer {
    flex-grow: 1;
}

浮动权利在我的情况下不起作用，我该怎么办？

2 个答案: