在HTML中创建一个水平布局的项目组 [英] Creating a horizontally laid out group of items in HTML

问题描述

在Flex中有一个名为HGroup的容器组件，它横向地展示了它的内容。在HTML中相当于以下内容：

 < HGroup gap =10> 
 < button width =10/> 
< button width =100/> 
< / HGroup> 
  

对于HTML开发人员，HGroup的功能是HGroup标记中的每个项目都位于前一个项目。在上面的代码中，每个按钮将放在最后一个按钮之后。 gap属性指定每个项目之间有多少空间。 hgroup适合所有元素的宽度，不会环绕到下一行。有一个verticalAlign属性可以将元素顶部，中间或底部对齐。

我认为带有某种无包装的div或span标签样式是模拟HGroup行为的最接近的标签？

解决方案

在要内嵌的元素上，将显示样式设置为内联。例子

 < div name =HGroup531style =position：absolute; left：138px; top：107px; width ：180像素;高度：23像素;> 
< input type =buttonname =Button605style =display：inline; padding-right：2px; vertical-align：middle; width：70px; height：21px; font-family：Arial;字体大小：12px的;值= 按钮/> 
< input type =buttonname =Button635style =display：inline; vertical-align：middle; width：70px; height：21px; font-family：Arial; font-size：12px; 值= 按钮/> 
< / div> 
  

至少这就是我所知道的。

In Flex there is a container component called HGroup that lays out it's contents horizontally. What would the equivalent to the following be in HTML:

<HGroup gap="10">
   <button width="50"/>
   <button width="10"/>
   <button width="100"/>
</HGroup>

The features of the HGroup, for HTML developers, are that each item in the HGroup tag is positioned after the previous item. In the code above each button would be placed after the last. The gap property specifies how much space is between each item. The hgroup fits the width of all it's elements and does not wrap around to the next line. There is a verticalAlign property that aligns the elements top, middle or bottom.

I think a div or span tag with some sort of no wrap style the closest tag that mimics the HGroup behavior?

解决方案

On the elements that you want to be inline you set the display style to inline. Example,

<div name="HGroup531" style="position:absolute;left:138px;top:107px;width:180px;height:23px;">
    <input type="button" name="Button605" style="display:inline;padding-right:2px;vertical-align: middle;width:70px;height:21px;font-family:Arial;font-size:12px;" value="Button"/>
    <input type="button" name="Button635" style="display:inline;vertical-align: middle;width:70px;height:21px;font-family:Arial;font-size:12px;" value="Button"/>
</div>

At least this is how you do it to the best of my knowledge.

这篇关于在HTML中创建一个水平布局的项目组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！