如何將輸入文本/文件排成一行

我正在設計一個多行的網頁Label name & input type file。我非常努力地按照相同的順序安排，但沒有做到。有什麼想法嗎？如何將輸入文本/文件排成一行

請看看enter link description here，看起來很醜陋，

來源

2011-11-24 user1010399

在line''意味着什麼？ –

我真的不知道你在找什麼，但檢查出jsfiddle改變我製作。我稍微修改了兩個CSS類。

來源

2011-11-24 07:23:13

太棒了！這是我正在尋找的。但有人告訴我們'不要使用float'，因爲它現在已經被刪除了。順便說一句，非常感謝 – user1010399

我不知道你在哪裏聽說過float被棄用？使用float是完全正確的，但是您需要確保如何使用它，因爲這樣的內聯內容沒有問題。 –

浮動不被棄用。現在還有其他的定位解決方案（顯示器：內嵌塊，顯示器：表格單元格等等，具體取決於您對舊瀏覽器的支持以及客戶端可以接受的優雅降級），但您仍然可以使用浮動。仍然更好（也是唯一）的方式來圍繞你的內容中的圖像文字。這就是它的設計目的。但是對於定位塊，只有在您不知道任何更好的解決方案時才使用浮動塊。 – FelipeAls

看一看這個教程：http://www.websiteoptimization.com/speed/tweak/forms/

來源

2011-11-24 07:21:17 Dennis

現在它看起來不錯:)

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 
}

來源

2011-11-24 07:25:03

您可以檢查this fiddle進行了以下修改：

刪除不建議使用的屬性從div對齊並將內聯CSS樣式（樣式屬性）對齊CSS文件
對於用於標籤文本的b元素相同：span更好，並且它已經是粗體作爲其父項。或字體重量：粗體;將被添加到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; 
}

來源

2011-11-24 07:38:35 FelipeAls

謝謝菲利普！ – user1010399

我忘記了ID和輸入和標籤上的屬性，doh！ – FelipeAls

如何將輸入文本/文件排成一行

回答

相關問題