如何使用<li>获得相同大小的盒子,一个在另一侧?

时间:2018-03-15 21:25:48

标签: html css

我使用Download Monitor Wordpress插件获取下载框,由<li>一个在另一侧制作,但框大小取决于imga大小的文本数量。我怎样才能制作相同尺寸的盒子?

https://jsfiddle.net/rodrick26/24z9q8b1/

我认为这是重要的CSS部分:

.dlm-downloads li {
    list-style-image: none;
    list-style: none;
    list-style-type: none;
    display: inline-block;
    margin-right: 20px;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

.content ul {
    list-style: disc;
}

.download-box {
    width: 250px;
    border: 1px solid #ccc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    position: relative;
    margin: 1em auto;
    box-shadow: 0 2px 4px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.4);
}

.download-box img.wp-post-image {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-top-left-radius: 3px;
    -moz-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    border-radius: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

0 个答案:

没有答案