对齐DIV内容不起作用

Question

在DIV内容对齐方面遇到问题。我将DIV设置为向右浮动页面，内容是否也应该向右浮动？ Unix转换文本框下面的文件类型输入未与右对齐。

<div style="float: right; display: inline-block; list-style: none; padding: 0; margin: 0; zoom: 1;">
    <input style="width: 200; margin-right: -3px;" id="txtunix" type="text" value="Convert Unix Timestamp" onclick='cleartxtunix()'>
    <input class="button" style="margin-right: 0px; border-top-right-radius: 50em; border-bottom-right-radius: 50em;" type="button" value="Convert" onclick='displayunix()'>
    <br>
    <input class="button" type="file" id="fileinput" style="margin-right: 0px; border-top-right-radius: 50em; border-bottom-right-radius: 50em;">
</div>

Answer 1

不，如果元素浮动到右侧，则内容不会自动对齐，但会继承它的父级设置（默认值：左）。

您需要向其添加text-align: right，以使文字排在右侧。

<div style="text-align: right; float: right; display: inline-block; list-style: none; padding: 0; margin: 0; zoom: 1;">
    <input style="width: 200; margin-right: -3px;" id="txtunix" type="text" value="Convert Unix Timestamp" onclick='cleartxtunix()'>
    <input class="button" style="margin-right: 0px; border-top-right-radius: 50em; border-bottom-right-radius: 50em;" type="button" value="Convert" onclick='displayunix()'>
    <br>
    <input class="button" type="file" id="fileinput" style="margin-right: 0px; border-top-right-radius: 50em; border-bottom-right-radius: 50em;">
</div>

Answer 2

您需要在下面显示的示例中的浮动父块text-align: right上指定.panel。

请注意，#fileinput样式需要引起注意，但代码段会显示您需要的对齐方式。

小错误修复：请务必将单位添加到width: 200px。

最后，子元素可以是内联块或内联块（display属性值）。选择取决于您的设计和造型。

.panel {
  float: right;
  border: 1px dotted blue;
  text-align: right;
}
#txtunix {
  width: 200px;
  margin-right: -3px;
}
.button {
  margin-right: 0px;
  border-top-right-radius: 50em;
  border-bottom-right-radius: 50em;
}
#fileinput {
  border: 1px solid gray;
  background-color: lightgray;
}

<div class="panel">
  <input id="txtunix" type="text" value="Convert Unix Timestamp">
  <input class="button" type="button" value="Convert">
  <br>
  <input class="button" id="fileinput" type="file" value="">
</div>