Question

我试图编写一个网站，我有点难过。我已经尝试了所有的东西 display: inline-block;至float: left;和float: right;
无济于事。我想知道如何让<i>标签并排而不是上下？

body{
    padding: 0;
    margin: 0;
}
.top-navbar{
    background-color: black;
    height: 50px;
    width: 100%;
}
.icons{
    width: 80px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.pic{
    text-align: center;
    padding: 6.5px 2px 2px 2px;
    height: 40px;
    width: 40px;
}
.pic:hover{
    transition: background-color 0.5s ease;
    background-color: red;
}
#top-nav-img{
    color: white;
}

<body>
        <div class="top-navbar">
            <div class="icons">
                <div class="pic">
                    <i class="fa fa-user fa-2x" id="top-nav-img"></i>
                </div>
                <div class="pic">
                    <i class="fa fa-info fa-2x" id="top-nav-img"></i>
                </div>
            </div>
        </div>
</body>

Answer 1

.pic无法放入.icon，因为.pic s的宽度大于其父级，因此第二个.pic转到第二行。不过，您可以从width:80%;移除.icon或缩小.pic的尺寸。

body{
    padding: 0;
    margin: 0;
}
.top-navbar{
    background-color: black;
    height: 50px;
    width: 100%;
}
.icons{
    /* width: 80px; */
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.pic{
    text-align: center;
    padding: 6.5px 2px 2px 2px;
    height: 40px;
    width: 40px;
    float:left;
    background-color:red; 
    color:#fff;
    border:1px solid #fff;
}
.pic:hover{
    transition: background-color 0.5s ease;
    background-color: red;
}
#top-nav-img{
    color: white;
}

<body>
        <div class="top-navbar">
            <div class="icons">
                <div class="pic">
                    <i class="fa fa-user fa-2x" id="top-nav-img">1</i>
                </div>
                <div class="pic">
                    <i class="fa fa-info fa-2x" id="top-nav-img">2</i>
                </div>
            </div>
        </div>
</body>

Answer 2

将display:inline;添加到.pic css。

body {
  padding: 0;
  margin: 0;
}
.top-navbar {
  background-color: black;
  height: 50px;
  width: 100%;
}
.icons {
  width: 80px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.pic {
  text-align: center;
  padding: 6.5px 2px 2px 2px;
  height: 40px;
  width: 40px;
  display: inline;
}
.pic:hover {
  transition: background-color 0.5s ease;
  background-color: red;
}
#top-nav-img {
  color: white;
}

<body>
  <div class="top-navbar">
    <div class="icons">
      <div class="pic">
        <i class="fa fa-user fa-2x" id="top-nav-img">a</i>
      </div>
      <div class="pic">
        <i class="fa fa-info fa-2x" id="top-nav-img">b</i>
      </div>
    </div>
  </div>
</body>

Answer 3

你要.icons瘦身。请注意，当您将width和padding设置为元素时，值会相加，因此如果宽度为40px且2px或填充，则为{{1} （每边44px） - 除非您设置2px，否则box-sizing: border-box将由值确定，填充将在该值内。

width

body{
    padding: 0;
    margin: 0;
}
.top-navbar{
    background-color: black;
    height: 50px;
    width: 100%;
}
.icons{
    width: 100px;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.pic{
    display: inline-block;
    text-align: center;
    padding: 6.5px 2px 2px 2px;
    height: 40px;
    width: 40px;
}
.pic:hover{
    transition: background-color 0.5s ease;
    background-color: red;
}
#top-nav-img{
    color: white;
}

并排显示元素

3 个答案: