HTML，将div放在彼此附近

我在我的html代码中遇到问题。我有“标题”，“名字”和“姓氏”，我需要一个输入框在下面由用户完成。这些输入框在我的表单生成器中被定义为字段（例如[en_title]）现在，当我写下html代码以显示输出时，这些块被放置在彼此之下。我想将它们放在彼此附近，当我在div风格中使用float时，它们彼此靠近，但输入框收缩，而在第一种情况下输入框不收缩。请给我一个这个问题的解决方案，放置在彼此附近的块和箱子不缩小。谢谢HTML，将div放在彼此附近

<div> 
    Title <br /> 
    [en_title] 
</div> 
<div> 
    Firstname <br /> 
    [en_fname] 
</div> 
<div> 
    Surname <br /> 
    [en_sname] 
</div>

来源

2017-06-29 shp

如果你只有3个元素，使用'float：left;宽度：33.333％'。如果有任何填充或边框涉及添加'框大小：边界框' – Morpheus

固定宽度可能是你需要的。如果你已经显示了你现有的CSS，会更好。 – ADyson

所以你有3格，你想要放置在水平附近彼此。包含所有这些div的div的宽度是100％。所以每个div都有100/3％的宽度。例如，它用作Bootstrap。

可以是这样做的

运行片段

.your-block { 
 
    float: left; 
 
    width: 33.33333%; 
 
}

<div class="your-block"> 
 
    <label for="title">Title </label> <br /> 
 
    <input id="title" type="text"/> 
 
</div> 
 
<div class="your-block"> 
 
    <label for="firstname">firstname </label> <br /> 
 
    <input id="firstname" type="text"/> 
 
</div> 
 
<div class="your-block"> 
 
    <label for="surname">surname </label> <br /> 
 
    <input id="surname" type="text"/> 
 
</div>

来源

2017-06-29 07:46:24 1ronmat

非常感谢，非常有帮助。 – shp

但@shp如果你改变你的div的填充，你必须减小宽度。尝试使用像bootstrap这样的工具，可以轻松帮助您 – 1ronmat

，你将需要使用宽度，还可以使用position:absolute，让您可以随时随地将您的控制与margin-left:10px或margin-top:10px无论你的情况。如果你分享你的css代码也是有帮助的。

来源

2017-06-29 07:49:03

使用display:inline-block;而不是float

div{ 
 
display:inline-block; 
 
}

<div> 
 
Title <br /> 
 
<input type="text"/> 
 
</div> 
 
<div> 
 
Firstname <br /> 
 
<input type="text"/> 
 
</div> 
 
<div> 
 
Surname <br /> 
 
<input type="text"/> 
 
</div>

来源

2017-06-29 07:49:10

更好的解决方案：不要使用divitis对于这一点，使用标签和输入框：

HTML：

<form> 
    <label> Name <input type="text"> </label> 
    <label> Email <input type="email"> </label> 
</form>

CSS：

form{display: flex}

这种方式，你有语义的HTML和达到你想要的效果。关于flexbox可以做什么的一个很好的概述是在css-tricks上：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

来源

2017-06-29 08:00:29 cloned

HTML，将div放在彼此附近

回答

相关问题