對齊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內容不能正常工作

回答

相關問題