时间戳

首页 > 解决方案 > 为我的导航栏发出内联圆形 div

html - 为我的导航栏发出内联圆形 div

问题描述

hi 将以圆形提供。我得到了带有文本的响应式圆圈的代码，但问题是这顶帽子我无法在一行中内联两个圆圈。我试过浮动：左；以及 display:inline-block; 但两者都不适合我。显示：inline-block；内联圆圈，但其中的文本重叠。这是我的 HTML：

    /*------NAV--BAR--*/
    * .fa-navicon{padding:8px; font-size:7vw ;}
    .nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
    .nav-bar input{ border:; outline:none; margin-left:10px;
      width:70%;
    }
    .nav-bar input::placeholder{color:grey; margin-left:10px;}
    /*--copied-code---*/
    .circle {
      position: relative;
      display: block;
      margin: 2em 0;
      background-color: transparent;
      color: #222;
      text-align: center;
    }
    
    .circle:after {
      display: block;
      padding-bottom: 30%;
      width: 30%;
      height: 0;
      border-radius: 50%;
      background-color: #ddd;
      content: "";
    }
    
    .circle__inner {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 30%;
      height: %;
    }
    
    .circle__wrapper {
      display: table;
      width: 100%;
      height: 100%;
    }
    
    .circle__content {
      display: table-cell;
      padding: 1em;
      vertical-align: middle;
    }
    
    @media (min-width: 480px) {
      .circle__content {
        font-size: 2em;
      }
    }
    
    @media (min-width: 768px) {
      .circle__content {
        font-size: 4em;
      }
    }
    }
    <div class="nav-bar">
    <input type="search" placeholder="Search...">
    <i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
    <div class="option-wrapper">
    <div class="circle">
      <div class="circle__inner">
        <div class="circle__wrapper">
          <div class="circle__content">Global</div>
        </div>
      </div>
    </div>
    <div class="circle">
      <div class="circle__inner">
        <div class="circle__wrapper">
          <div class="circle__content">Friends</div>
        </div>
      </div>
    </div>
    <div class="circle">
      <div class="circle__inner">
        <div class="circle__wrapper">
          <div class="circle__content">Classroom</div>
        </div>
      </div>
    </div>
    <div class="circle">
      <div class="circle__inner">
        <div class="circle__wrapper">
          <div class="circle__content">Games</div>
        </div>
      </div>
    </div>
    </div>
    </div>

根据用户屏幕大小，我希望每行有两个或三个圆圈。

对不起，如果我做错了什么。这是我的第一个任务。在 stackoverflow.Thnks 提前。

标签： htmlcssnavbar

解决方案

选中此项，调整浏览器大小以查看响应性。您还可以根据您的媒体大小更改圆圈尺寸和字体大小。

如果您需要整个站点具有响应性，我建议使用流行的 CSS 框架“Bootstrap”来实现它，它非常简单 - Bootstrap-Grid-HowItworks

.fa-navicon{padding:8px; font-size:7vw ;}
.nav-bar{position:absolute;z-index:5;width:100%; height:100%; background:grey; padding:10px;}
.nav-bar input{ border:; outline:none; margin-left:10px;
    width:70%;
}
.nav-bar input::placeholder{color:grey; margin-left:10px;}

.circle-wrapper {
    float: left;
    margin: 10px;
}

.circle {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: #f2f2f2;
    border-spacing: 10px;
}

@media (min-width: 480px) {
    .circle{
        height: 150px;
        width: 150px;
        font-size: 30px;
    }
    
}

@media (min-width: 768px) {
    .circle {
        height: 150px;
        width: 150px;
        font-size: 30px;
    }
    
}
<div class="nav-bar">
    <input type="search" placeholder="Search...">
    <i class="fa fa-close " style="font-size:7vw;color:#393e41; padding:3px; vertical-align:top; "></i>
    <div class="option-wrapper">
        <div class="circle-wrapper">
            <div class="circle">Global</div>
        </div>
        <div class="circle-wrapper">
            <div class="circle">Friends</div>
        </div>
        <div class="circle-wrapper">
            <div class="circle">Classroom</div>
        </div>
        <div class="circle-wrapper">
            <div class="circle">Games</div>
        </div>
        <div class="circle-wrapper">
            <div class="circle">School</div>
        </div>
        <div class="circle-wrapper">
            <div class="circle">College</div>
        </div>
    </div>
</div>

推荐阅读