Question

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。或浮动元素（浮动元素隐式显示为block。）

如您所知，设置内联元素的宽度将无效。

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

1 个答案: