对齐DIV内容不能正常工作

DIV内容对齐有问题。我将DIV设置为浮动页面的右侧，内容不应该正确地浮动？ Unix Conversion文本框下面的文件类型输入未对齐到右侧。对齐DIV内容不能正常工作

<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>

enter image description here

来源

2015-05-04 Jay

你想去哪里下面的元素是什么？转换按钮的权利？ –

请详细解释您的问题 – khurram

您必须使用float：right或display：inline-block; – Dmitriy

没有，如果元素是浮动的权利，其内容将不会自动对齐，但将继承它的父母设置（默认：左）。

您需要将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>

来源

2015-05-04 10:10:26 LinkinTED

我不介意downvotes，但想解释为什么，所以我可以改善我的答案。 – LinkinTED

不是我：/这是SO的幽灵：s – Jay

我在哪里添加文本对齐？到div的风格？文本对齐仍然兼容主要和新版本的浏览器？ – Jay

需要在下面所示的例子中，以指定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>

来源

2015-05-04 11:00:34

对齐DIV内容不能正常工作

回答

相关问题