如何修复字段集宽度

时间:2018-06-26 19:51:37

标签: css fieldset

我有一个带有<a>标签的字段集作为子级。当我调整子项的大小时,即使设置了width属性,字段集的宽度也会发生变化。但是,高度不会改变。我想知道如何设置固定宽度。

fieldset {
        float: right;
        margin-top: 40px;
        display: inline-block;
        vertical-align: top;
        height: 80px;
        width: 70px;
        text-align: center;
        overflow: hidden;
        border: 1px solid rgb(226, 226, 226);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px, rgba(0, 0, 0, 0.15) 0px 4px 15px 0px;
}


a {
      background-color: red;
      border-color: rgb(212, 214, 216);
      border-width: 20px;
      box-shadow: rgb(212, 214, 216) 0.5px 0.5px 1px 0px;
      width: 50px;
}

.fa {
    padding: 5px;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    margin-left: 2px;
    transition: 0.3s;
    background: white;
    color: #303030;
    border: 10px solid red;
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 0.5px 0px #d4d6d8;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<fieldset>
    <legend>Preview</legend>
    <a class="Preview"></a>	
</fieldset>

1 个答案:

答案 0 :(得分:0)

我找到了解决方法。

基本上,我将<a>放入<div>中,并给<div>设置了与字段集相同的高度和宽度,然后字段集的大小没有变化。如果我更改<div>

的大小,则不会增加