Question

我有一个显示有均匀边框半径的项目列表。但是，根据内容大小，形状从圆形到圆角矩形不等。无论内容大小如何，如何使用圆角矩形格式显示所有项目？这是一个示例小提琴http://jsfiddle.net/tyby62p7/

.spanc{
    border:1px solid;
    border-radius:20px;
    padding:10px;
    margin-left:10px;
}

Answer 1

可能你想要这样的东西：

border-top-right-radius: 25% 50%;
border-bottom-right-radius: 25% 50%;
border-top-left-radius: 25% 50%;
border-bottom-left-radius: 25% 50%;

您可以找到示例代码here和有趣的事物here。

<强>更新

您可以做的其他事情是为标签修复最小宽度。

<强> HTML

<div class="spanc">H</div>
<div class="spanc">Howdy</div>
<div class="spanc">Uh</div>
<div class="spanc">Wow</div>

<强> CSS

.spanc{
    border:1px solid;
    padding:10px;
    margin-left:10px;
    border-top-right-radius: 25% 50%;
    border-bottom-right-radius: 25% 50%;
    border-top-left-radius: 25% 50%;
    border-bottom-left-radius: 25% 50%;
    min-width: 80px; /*force to have a minimum width*/
    display: inline-block; /*to keep in the same line*/
    text-align: center
}

示例here。

Answer 2

为什么不使用圈子？我觉得它看起来更好。我更新了你的小提琴here

<强> HTML

＆＃13;

<br><div class="spanc"><span class='custom_span'>Hi</span></div>
    <div class="spanc"><span class='custom_span'>Howdy</span></div>
    <div class="spanc"><span class='custom_span'>Uh</span></div>
    <div class="spanc"><span class='custom_span'>Wow</span></div>

＆＃13;

<强> CSS

＆＃13;

.spanc{
    border:1px solid;
    border-radius: 100px;
    width:100px;
    height:100px;
    margin-left:10px;
    margin-bottom: 20px;
    text-align:center;
    float:left;    
}
.custom_span{
    position: relative;
    top: 40px;
    text-align:center;
}

＆＃13;

统一边界半径和填充

2 个答案: