Question

我是html的新手

我打算创建一个像这样的部分

这是我为它写的代码

<div>
            <div style="margin: 20px;">
                {% if g.VM.MajorVersionDict.values() %}
                    <label for="versionId">Major Version</label>
                    <select id = "versionId" name="versionId" form="uploadTemplateForm">
                        {% for majorversionname ,majorversion in g.VM.MajorVersionDict.iteritems() %}
                            <option value = {{ majorversion ['id']}}>Version - {{ majorversionname }}</option>
                        {% endfor %}    
                    </select>
                {% endif %}    
            </div>
            <div style="margin: 20px;">
                <form id = "uploadTemplateForm" method="post" enctype="multipart/form-data">
                    <div style = " width: 300px;">
                        <label for="file" 
                        style = "display: inline-block;width: 140px;text-align: left;">
                        File</label>
                        <input type="file" name="file" id="file"><br /> <br /> 
                    </div>
                    <div>
                        <input type="submit" id = "Button" value="Upload Template">
                    </div>
                </form>
            </div>
        </div>

但是我的部分看起来像这样

Observed

我该怎么做才能获得所需的部分

Answer 1

更新2

经过明显的解决方案OP仍然存在标签的移位文本问题。下一个建议是使用display:table。请参阅代码段2，它有两个示例：

Double Classes ：在样式表（例如style.css）或块（即<style>）中两次声明类，可以提高特异性。
内嵌样式：除了使用!important使用style属性具有最大的特异性。如果这个例子不起作用，那么它必须是问题中未提及的一些代码。

更新1 移除display:inline-block上的<label>。作为内联元素，<label>当然会与内联输入内联。

在代码段底部是#file和<form>的副本。这个副本删除了div，一切都是一样的。尝试删除div。

~~包围<input id='file'>的div太小，将宽度增加到400px。~~在Snippet中，您会注意到字体大小相同。这有助于将表单元素垂直对齐到标签文本非常容易。加上这个：

input,
select,
label {
 font: inherit;
}

SNIPPET 1

input,
select,
label {
  font: inherit;
}

<div>
  <div style="margin: 20px;">

    <label for="versionId">Major Version</label>
    <select id="versionId" name="versionId" form="uploadTemplateForm">
      <option value =''>Version - </option>
    </select>
  </div>

  <div style="margin: 20px;">
    <form id="uploadTemplateForm" method="post" enctype="multipart/form-data">
      <div width='600'>
        <label for="file">File</label>
        <input type="file" name="file" id="file">
        <br/><br/>
      </div>

      <div>
        <input type="submit" id="Button" value="Upload Template">
      </div>
    </form>
  </div>
</div>
<hr>
<div style="margin: 20px;">
  <form id="uploadTemplateForm" method="post" enctype="multipart/form-data">

    <label for="file" style='inline-block;width:140px;'>File</label>
    <input type="file" name="file" id="file">
    <br/><br/>


    <div>
      <input type="submit" id="Button" value="Upload Template">
    </div>
  </form>
</div>

SNIPPET 2

input,
select,
label {
  font: inherit;
}

.fileTable.fileTable {
  display: table;
  table-layout: fixed;
}

.fileRow.fileRow {
  display: table-row;
}

.fileCell.fileCell {
  display: table-cell;
}

span.fileCell {
  width: 140px;
}

<p>Double Classes</p>
<div class='fileTable'>
  <div class='fileRow'>
    <label for="file" class='fileCell'>File</label>
    <span class='fileCell'></span>
    <input type="file" name="file" id="file" class='fileCell'>
  </div>
</div>
<div>

  <hr>

  <p>Inline Style</p>
  <div style='display:table;table-layout:fixed'>
    <div style='display:table-row'>
      <label for="file" style='display:table-cell'>File</label>
      <span style='display:table-cell;width:140px;'></span>
      <input type="file" name="file" id="file" style='display:table-cell;'>
    </div>
  </div>
  <div>

Html中的Input和Label元素不在同一行中

1 个答案: