CSS响应HTML形成

我有这样的HTML代码：CSS响应HTML形成

<h4>Company Details</h4> 

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

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

我想有文本输入和标签相互然后直接显示在屏幕变小动下的文本输入标签

来源

2015-04-17 CharlesF

您使用的引导？ http://getbootstrap.com/css/#grid –

@ K.B.M bootstrap与什么有关？ – Rob

是的，为什么不使用整个框架来替换两行CSS？ – ecc

有很多方法可以做到这一点。选择最适合您项目的产品。我将使用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; 
    } 
}

来源

2015-04-17 12:47:44 ecc

这很容易实现。只需设置：

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

来源

2015-04-17 12:49:45 larssy1

@ larrssy1为什么使用'div'元素将其设置为'inline'？ – Amessihel

这是他的源代码，他将输入内容封装在div中，我只是稍作改动就可以工作。只要记住，如果你不把它包装在一个div中（这可能是一个更多表单元素的容器），那你必须为所有元素创建一个样式表。如果它只是用于输入字段，那么div就是可选的。 – larssy1

在这种情况下，为了对内联元素进行分组，我倾向于使用'span'元素...但是，如果您寻找一个小小的变化，那没关系。 – Amessihel

CSS响应HTML形成

回答

相关问题