CSS地狱,我只想要一个最小尺寸和1像素间隙的盒子

Question

CSS地狱,我只想要一个最小尺寸和1像素间隙的盒子

请帮助用CSS实现这一点:我有一系列文本字符串,从1个字符到200个字符.我需要在单独的框中将它们显示在网页中.

盒子流程类似于文本,从左到右直到页面结束然后换行
每个框的背景颜色必须是青色.
最小宽度和高度必须都是50像素
盒子之间1-2个像素空间(可能有余量= 1)
文本和框边缘之间必须至少有两个像素
文本垂直对齐到中间
文本水平对齐到中心
盒子的最大宽度必须为300像素
如果文本不适合50x300,则会在框内裁剪(框不会生长)
每个盒子应该有1个像素的黑色边框

这对于经验丰富的人来说必须简单!我已经尝试了几乎所有可能的CSS标签; 但总是有些不对劲.我读到了关于CSS拳击的内容,但令人惊讶的是它只是让它更加完整.

<style>
z {
    min-width: 50;
    #min-height: 50;
    padding: 1px;
    padding-color: magenta;
    margin: 1px;
    margin-color: red;
    #padding-left: 10px;
    display: table-cell;
    #height: 50;
    #vertical-align: middle;
    #text-align:center;
    background-color: cyan;
    #border: 1px;
    #border-color:green;
    /* padding:10px 10px 10px 10px; */
    border-top:1px solid
    border-style:solid;
    border-color:#ff0000 #0000ff;
    outline-style:dotted;
    outline-color:#00ff00;
    outline-width: 1px;
    color: blue;
}
</style>

<html>
    <z>1</z>
    <z>abcdefghijklmnope</z><z>2</z><z>blablablabla</z>
</html>

Run Code Online (Sandbox Code Playgroud)

我正在粘贴这个,所以你可以看到我尝试的是多么艰难.

Answer 1

RoT*_*oRa 5

好.

不要使用组成/无效的HTML元素或无效的CSS注释.仅仅因为"它似乎不重要",并不意味着它不会产生问题.当你的HTML/CSS无效时,无法判断这是不是问题,你只会得到答案,告诉你纠正它们.
CSS需要长度单位.min-width: 50;是无效的,如果它对你有效,那只是意味着你没有编写正确的HTML/CSS并且文档处于Quirks模式,这意味着浏览器会模拟旧的IE错误,这使得调试变得更加困难.
没有这样的属性padding-color或margin-color.别补东西.使用CSS和验证器检查您的代码.(http://validator.w3.org和http://jigsaw.w3.org/css-validator/).
使用display: table-cell;将只将所有元素放在一个"表格行"中,而不包装.

<p><span><span>1</span></span></p>
<p><span><span>abcdefghijklmnope</span></span></p>
<p><span><span>2</span></span></p>
<p><span><span>blablablabla</span></span></p>

p {
    min-width: 50px;
    max-width: 300px;

    height: 50px;
    padding: 2px;
    margin: 1px;

    float: left;
    background-color: cyan;

    border: 1 px solid blue;

    color: blue;
    overflow: hidden;
}

p > span {
    display: table;
    height: 100%;
    width: 100%;
}

p > span > span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Run Code Online (Sandbox Code Playgroud)

见http://jsfiddle.net/DyzAD/1/

归档时间：	12 年，6 月前
查看次数：	278 次
最近记录：	12 年，6 月前