CSS響應HTML形成

Question

我有這樣的HTML代碼：

<h4>Company Details</h4> 

<div> 
    <label for="company">Company</label> 

    <div> 
     <input type="text" name="company" value="<?php echo $customer["company"]; ?>" /> 
    </div> 
</div> 

我想有文本輸入和標籤相互然後直接顯示在屏幕變小動下的文本輸入標籤

Answer 1

有很多方法可以做到這一點。選擇最適合您項目的產品。我將使用CSS將標籤和包含輸入的div設置爲「inline」或「inline-block」。然後，如果您需要將行分解爲兩部分，請使用媒體查詢（請參閱最後一段代碼片段）。

<h4>Company Details</h4> 
<div class="input-group"> 
    <label for="company">Company</label> 
    <div> 
     <input type="text" name="company" value="<?php echo $customer["company"]; ?>" /> 
    </div> 
</div> 

// This will make them show inline occupying half the width 
.input-group > label, .input-group > div{ 
    display: inline-block; 
    width: 50%; 
} 

我有時與直列塊， 額外的像素問題，我通常由浮動塊或 字體大小設置爲零解決它。

// This way the label and input float 
.input-group { 
    clear: both; // So the container doesn't collapse 
} 
.input-group > label, .input-group > div{ 
    float: left; 
    width: 50%; 
} 

字體大小的版本：

// This way the font size in the container is zero 
.input-group { 
    font-size: 0; 
} 
.input-group > label, .input-group > div{ 
    display: inline-block; 
    width: 50%; 
    font-size: 12px; 
} 

你div會自動延伸到屏幕的100％，所以你不需要媒體查詢來設置它的寬度;它已經是響應了。但是，如果你堅持使用它們，或者需要它們，請添加以下內容：

@media (max-width: 500px) { 
    .input-group > label, .input-group > div{ 
     display: block; 
     float: none; 
    } 
} 

Answer 2

這很容易實現。只需設置：

.inputLine label, .inputLine div { 
    display: inline; 
} 

隨着HTML之中：

<h4>Company Details</h4> 

<div class="inputLine"> 
    <label for="company">Company</label> 
    <div> 
     <input type="text" name="company" value="My Company" /> 
    </div> 
</div> 

工作例如：

http://jsfiddle.net/wLjekogo/

---

更新時間：2015年4月20日

到交流提供請求的輸出，同時允許多個內聯元素。你可以使用下面的HTML/CSS組合：

HTML

<h4>Company Details</h4> 

<div class="inputLine"> 
    <label for="company">Company</label> 
    <input type="text" name="company" value="My Company" /> 
</div> 

<div class="inputLine"> 
    <label for="company">Company</label> 
    <input type="text" name="company" value="My Company" /> 
</div> 

CSS

.inputLine { 
    display: inline-block; 
} 

.inputLine label { 
    display: inline-block; 
    max-width: "100%"; 
} 

.inputLine input { 
    display: inline-block; 
    width: auto; 
} 

這將顯示所有輸入字段內聯，除非屏幕太小。在這種情況下，首先divs將在一個新的線上，甚至更小，一個垂直的形式。

例子： http://jsfiddle.net/wLjekogo/2/