Question

我正在设计一个多行Label name & input type file的网页。我努力安排在同一行序列但没有做到。有什么想法吗？

请看一下enter link description here，它看起来很丑陋而且

Answer 1

查看本教程：http://www.websiteoptimization.com/speed/tweak/forms/

Answer 2

我不确定您在寻找什么，但请查看我所做的jsfiddle更改。我稍微修改了两个CSS类。

Answer 3

现在看起来不错：）

<强> HTML

<div id="divid1" align="center" style="padding:50px;">
  <div class="formrow">
    <label class="labelname" for="hide-file">Select Image* :</label>     
    <input type="file" name="file1" class="hide-file" />
  </div>
  <div class="formrow">
    <label class="labelname" for="hide-file">XML File* :</label>
    <input type="file" name="file2" class="hide-file" /> 
  </div>
</div>

<强> CSS

.labelname {
  background: green;
  font: bold 2px;
  margin-bottom: 2px;
  font-weight: bold;
  float: left
}

.hide-file {
 position: relative;
 opacity: 0.5;
 float: right
}

.formrow {
 width: 400px
}

Answer 4

您可以通过以下修改检查this fiddle：

从div中删除已弃用的属性，并将内联CSS样式（样式属性）移动到CSS文件
对于用于标签文本的b元素相同：span更好，并且它已经作为其父级加粗。或者font-weight：bold;将添加在CSS
display：inline-block;用来代替花车。之后无需清除它们。如果你支持它们，IE7和6需要修复（在评论中）。这允许您为元素赋予宽度（就像您可以对任何块元素一样）并仍然将它们放在同一水平线上（就像您可以对任何内联元素一样）。由于HTML代码中有空格，因此空格会显示4px，因为空格显示在内联元素中，例如两个span由空格分隔，但有一个修复。

HTML代码

<div id="divid1">
    <p>
        <label class="labelname"> <span> select Image* :</span>      
            <input type="file" name="file1" class="hide-file" />
        </label>
    </p>
    <p>
        <label class="labelname"> <span>XML File* :</span>
            <input type="file" name="file2" class="hide-file" />  
        </label>
    </p>
</div>

CSS

#divid1 {
    padding: 50px;
}

.labelname {
    width: 100%; /* or at least approx. 380px */
    min-height: 30px;
    display: block;
    background: lightgreen;
    font-weight: bold;
    margin-bottom: 2px;
}

/* Only for IE7 */
/*.labelname span,
.hide-file {
    display: inline;
    zoom: 1;
}
*/

.labelname span {
    display: inline-block;
    width: 140px;
    text-align: right;
    background-color: lightblue;
}

.hide-file {
    display: inline-block;
    opacity:0.5;
}

如何在一行中排列输入文本/文件

4 个答案: