Question

我有两个元素菜单和带有用户信息的标题/功能区。菜单看起来不错，但带有用户名的功能区不能很好地适应页面。请看我的代码： JSFiddle

＆＃13;

jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
        jQuery(this).toggleClass('active');
        jQuery('.menu ul').toggleClass('active');
 
        e.preventDefault();
    });
});

＆＃13;

   body{
     width:100%;
     margin: 0 auto;
   }
   .menu {
        width: 100%;
        position:relative;
        display:inline-block;
       
    }
 
    .menu ul.active {
        display:none;
    }
 
    .menu ul {

        position:absolute;
        top:90%;
        left:0px;
        padding:10px 10em 0em 2em; /* menu width */
        border-radius:7px;
        
        background:#4CAF50;
    }
 
    .menu ul:after { /* black triangle position */
        width:0px;
        height:0px;
        position:absolute;
        top:0%;
        left:22px;
        content:'';
        transform:translate(0%, -100%);
        border-left:7px solid transparent;
        border-right:7px solid transparent;
        border-bottom:7px solid #303030;
    }
 
    .menu li {
       
        margin:5px -100px 5px 0px; /* text inside menu width */
        float:none;
        display:block;
    }
 
    .menu li * {
        vertical-align: middle;
    }
    .menu a {
       
        display:block;
    }
 
    .toggle-nav {
        padding:20px; /* squere element size */
        float:left;
        display:inline-block;
        box-shadow:0px 1px 1px rgba(0,0,0,0.15);
        border-radius:4px;
        background:#4CAF50;
        color:#FFFFFF;
        font-size:25px;
        transition:color linear 0.15s;
         font-weight: bold;
    }
 
    .toggle-nav:hover, .toggle-nav.active {
        text-decoration:none;
        color:#FFFFFF;
    }
    
      .band {
          position:relative;
          top:-72px;
          right:-70px;
        padding:14px; /* element size */
       width: 100%;
        float:left;
        display:inline-block;
        box-shadow:0px 1px 1px rgba(0,0,0,0.15);
        border-radius:4px;
        background:#4CAF50;
        color:#FFFFFF;
        font-size:17px;
        transition:color linear 0.15s;
         font-weight: bold;
    }
   
   .ribbon:before {
    content: "";
    display: block;
            }

＆＃13;

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <nav class="menu">
    <ul class="active">
        <li class="current-item"><a href="?action=?home">
            <i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li>    
        
        <li>
            <a href="?action=?menu1"><i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu1</strong></a></li>
        <li>
            <a href="?action=?menu2"><i class="fa fa-flag-checkered fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Manu2</strong></a></li>
        
        <li>
            <a href="?action=?menu3"><i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu3</strong></a></li>
        
        <li>
            <a href="?action=?log-out"><i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></a></li>
    </ul>
    <a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
<div class="band"><i class="fa fa-user" aria-hidden="true"></i> User Name<i class="ribbon"></i><i class="fa fa-sign-language" aria-hidden="true"></i> Another name</div>

＆＃13;

当屏幕很宽时，您可以在右侧看到一个很大的白色间隙，但是当我在小屏幕上看到这个代码时，色带会重叠。如何显示始终100％宽度的功能区菜单方块需要在相同的位置和相同的宽度

Answer 1

您可以将.band的宽度更改为：

width: calc(100% - 97px);

因为菜单的宽度固定为97px，包括填充和边距。我们可以通过使用calc（）获得整个宽度 - 97px（100％ - 97px）来获得右侧部分的左侧空间。

希望这对你有所帮助。

Answer 2

您可以使用CSS flex执行此操作：

jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
        jQuery(this).toggleClass('active');
        jQuery('.menu ul').toggleClass('active');
 
        e.preventDefault();
    });
});

body {
    display: flex;
}
.menu {
    position: relative;
}

.menu ul.active {
    display: none;
}

.menu ul {
    position: absolute;
    top: 90%;
    left: 0;
    padding: 10px 10em 0em 2em; /* menu width */
    border-radius: 7px;
    background: #4CAF50;
}

.menu ul:after { /* black triangle position */
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 22px;
    content: '';
    transform: translate(0%, -100%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #303030;
}

.menu li {
    margin: 5px -100px 5px 0px; /* text inside menu width */
    float: none;
    display: block;
}

.menu li * {
    vertical-align: middle;
}
.menu a {
    display: block;
}

.toggle-nav {
    padding: 20px; /* squere element size */
    float: left;
    display: inline-block;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background: #4CAF50;
    color: #FFFFFF;
    font-size: 25px;
    transition: color linear 0.15s;
    font-weight: bold;
}

.toggle-nav:hover, .toggle-nav.active {
    text-decoration: none;
    color: #FFFFFF;
}

.band {
    flex: 0 1 100%;
    padding: 14px; /* element size */
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    background:#4CAF50;
    color: #FFFFFF;
    font-size: 17px;
    transition: color linear 0.15s;
    font-weight: bold;
    margin-left: 10px;
}

.ribbon:before {
    content: '';
    display: block;
}

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <nav class="menu">
    <ul class="active">
        <li class="current-item"><a href="?action=?home">
            <i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li>    
        
        <li>
            <a href="?action=?menu1"><i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu1</strong></a></li>
        <li>
            <a href="?action=?menu2"><i class="fa fa-flag-checkered fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Manu2</strong></a></li>
        
        <li>
            <a href="?action=?menu3"><i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu3</strong></a></li>
        
        <li>
            <a href="?action=?log-out"><i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></a></li>
    </ul>
    <a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
<div class="band"><i class="fa fa-user" aria-hidden="true"></i> User Name<i class="ribbon"></i><i class="fa fa-sign-language" aria-hidden="true"></i> Another name</div>

JSFiddle

Answer 3

试试这个：

 body{
     width:100%;
     margin: 0 auto;
   }
   .menu {
        width: 100%;
        position:relative;
        display:inline-block;

    }

    .menu ul.active {
        display:none;
    }

    .menu ul {

        position:absolute;
        top:90%;
        left:0px;
        padding:10px 10em 0em 2em; /* menu width */
        border-radius:7px;

        background:#4CAF50;
    }

    .menu ul:after { /* black triangle position */
        width:0px;
        height:0px;
        position:absolute;
        top:0%;
        left:22px;
        content:'';
        transform:translate(0%, -100%);
        border-left:7px solid transparent;
        border-right:7px solid transparent;
        border-bottom:7px solid #303030;
    }

    .menu li {

        margin:5px -100px 5px 0px; /* text inside menu width */
        float:none;
        display:block;
    }

    .menu li * {
        vertical-align: middle;
    }
    .menu a {

        display:block;
    }

    .toggle-nav {
        padding:20px; /* squere element size */
        float:left;
        display:inline-block;
        box-shadow:0px 1px 1px rgba(0,0,0,0.15);
        border-radius:4px;
        background:#4CAF50;
        color:#FFFFFF;
        font-size:25px;
        transition:color linear 0.15s;
         font-weight: bold;
    }

    .toggle-nav:hover, .toggle-nav.active {
        text-decoration:none;
        color:#FFFFFF;
    }

      .band {
          position:relative;
          top:-72px;
          right:-70px;
        padding:14px; /* element size */
       width: 100%;
        float:left;
        display:inline-block;
        box-shadow:0px 1px 1px rgba(0,0,0,0.15);
        border-radius:4px;
        background:#4CAF50;
        color:#FFFFFF;
        font-size:17px;
        transition:color linear 0.15s;
         font-weight: bold;
    }

   .ribbon:before {
    content: "";
    display: block;
            }

DEMO HERE

使用CSS

3 个答案: