html - 我正在从 div 设计一个按钮，但我想要它旁边的其他按钮，所以我使用了内联，但这完全扭曲了格式 :

Question

在此处可见: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 的宽度。但是，我设置了它的宽度。内联元素不会设置宽度吗？

我应该怎么做？

Answer 1

尝试inline-block 而不是简单的inline。或 float 元素( float 元素隐式显示为 block。)

如您所知，设置内联元素的宽度不会有任何效果。