Question

我正在制作菜单选择栏，当我鼠标移动时，我遇到了问题。图标的角落都应该是弯曲的，但只有左侧的角落。以下是代码演示：https://jsfiddle.net/gfqgcwq5/

据我所知，似乎inline-block是罪魁祸首：

.wrapper{
    display:inline-block;
    margin:10px;
}

我只是不知道如何在没有它的情况下完成内联数组。我不是很擅长CSS，所以如果有人能借给我一把，我会很感激。

Answer 1

试试这个：

.icon{
        border-radius:8px;
        padding-top:15px;
        padding-bottom:5px;
        transition:.1s;
        font-size:60px; 
    display: inline-table;
    }

    .icon:hover{ 
        cursor:pointer;
        background-color: #00B1EB;
        color:#fff;

    }

    span#picture > span {
        padding-right:9px;
        padding-left:10px;
        padding-top:7px;
        padding-bottom:10px;
    }


    .text{
        text-align:center;
    }

    .wrapper{
        display:inline-block;margin:10px;
    }

DEMO HERE

Answer 2

习惯了这个

定义您的.icon display inline-block

就像这样

.icon{display:inline-block;line-height:60px;}

或者您可以习惯

.icon{display:block;}

<强> Demo

Answer 3

请记住，border-radius是.icon类的属性（在本例中），如果使用检查器，您将看到包装器具有适当的大小和形状wraper

因为另一个说问题是在.icon类的显示上，如果你的想法是在包装器和内联中有多个.icon元素，你应该使用display：inline-block;，if if你的调用就是每个包装器只使用一个display：block;。希望这会对你有所帮助。

Answer 4

你必须提供图标块display: inline-block属性才能工作!!

 .icon {
   border-radius: 8px;
   padding: 15px;
   padding-bottom: 5px;
   transition: .5s all ease;
   font-size: 60px;
   display: inline-block;
 }
 .icon:hover {
   cursor: pointer;
   background-color: #00B1EB;
   color: #fff;
 }
 span#picture > span {
   padding-right: 9px;
   padding-left: 10px;
   padding-top: 7px;
   padding-bottom: 10px;
 }
 .text {
   text-align: center;
 }
 .wrapper {
   display: inline-block;
   margin: 10px;
 }

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
  <div class="text">PICTURES</div>
</div>
<div class="wrapper">
  <span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
  <div class="text">PICTURES</div>
</div>
<div class="wrapper">
  <span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
  <div class="text">PICTURES</div>
</div>
<div class="wrapper">
  <span id="picture" class="icon"><span class="glyphicon glyphicon-picture"></span></span>
  <div class="text">PICTURES</div>
</div>

Answer 5

为text div应用填充以允许整个曲线可见。

  .text{
    text-align:center;
    padding:0px 7px;
   }

DEMO

鼠标悬停上的边界半径在哪里

5 个答案: