1

可见这里：http: //jsfiddle.net/USy5L/

CSS：

.upload {
    display: inline;
    margin: 0 auto 15px auto;
    width: 400px;
    height: 50px;

    background: #fffbed;
    border: 1px solid #efdec4;
    border-radius: 5px;
    -moz-box-shadow: 0px 2px 4px rgba(236, 229, 199, 0.3), inset 0px 0px 3px 1px rgba(236, 229, 199, 0.5);
    -webkit-box-shadow: 0px 2px 4px rgba(236, 229, 199, 0.3), inset 0px 0px 3px 1px rgba(236, 229, 199, 0.5);
    box-shadow: 0px 2px 4px rgba(236, 229, 199, 0.3), inset 0px 0px 3px 1px rgba(236, 229, 199, 0.5);
}

input[type="button"] {
    width: 120px;
    height: 50px;
    float: right;

    border: 1px solid #4b2218;
    border-radius: 5px;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);

    background: #a35a47; /* Old browsers */
}

.filename {
    margin: 14px 0 0 14px;

    color: #bf9e7b;
    float: left;
    font-size: 1.2em;
    font-style: italic;
}

HTML：

<div class="upload">
    <input type="button" value="Browse">
    <span class="filename">No file selected</span>
</div>

我不知道我做错了什么。如果我使用 display:block，它可以完美地工作，但是因为我需要在同一行上的另一个按钮，所以我需要它是内联的。

使用检查器，它显示没有宽度，只是假设父 div 的宽度。但是，我设置了它的宽度。宽度不是用内联元素设置的吗？

我应该做些什么不同的事情？

4

1 回答 1

1

尝试inline-block而不是简单地inline. 或者浮动元素（浮动元素隐式显示为block。）

正如您所发现的，设置内联元素的宽度将不起作用。

于 2013-02-04T23:50:48.657 回答