如何将元素放到同一行 [英] How to put elements to same row
本文介绍了如何将元素放到同一行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面的html5订单打印表格是从包含固定布局字段的现有模板创建的。
每个字段都显示在不同的行中：
如何解决这个问题，使字段出现在同一行？我试图通过使用绝对位置来解决它：
.horizontalline，.field {
position：absolute;
$ b在这种情况下，elemts apper正确排列，但拉伸产品描述字段覆盖下一个行产品名称字段：
如何解决这个问题？
属性，风格可以改变。可以添加其他元素。
Html基础结构（行元素包含0或1个字段元素）最好不要改变，因为绝对没有更好的方法定位分离的字段与ex-exise非html模板。
测试用例：
$ b
<！DOCTYPE html>< html>< head> <风格> * {margin：0;填充：0; } .row {position：relative;明确：两者; } .field {overflow：hidden;文字中断：全部打破; } .horizontalline {font-size：1pt; border：1px solid＃000000; } .horizontalline，.field {position：relative; } .horizontalline {border-bottom-style：none！important; }< / style>< / head>< body> < div class ='row'style ='min-height：0.05cm;'> < div class ='horizontalline'style ='left：1.11cm; width：19.05cm; height：0.00cm; border-color：＃C0C0C0;'>< / div> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：1.26cm; width：0.71cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000;'大于1< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：2.05cm; width：8.47cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000;' > HP ProDesk 490 G3 - 微塔 - 1 x Core i7 6700< / div> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：10.58cm; width：1.68cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; text-align：right;颜色：＃000000;'> 2015年12月31日< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：12.24cm; width：0.79cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; text-align：right;颜色：＃000000;'→1< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：13.08cm; width：1.08cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000;' > TK< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：14.32cm; width：1.26cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000;' >< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：16.61cm; width：1.42cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; text-align：right;颜色：＃000000;'> 1189< / DIV> < / DIV> < div class ='row'style ='min-height：0.42cm;'> < div class ='field'style ='left：17.79cm; width：2.00cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; font-weight：bold;文本对齐：右;颜色：＃000000;'> 1189< / DIV> < / DIV> < div class ='row'style ='min-height：0.51cm;'> < div class ='field'style ='left：2.24cm; width：9.79cm; min-height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000 ;'> RAM 16 GB - SSD 256 GB - DVD SuperMulti - GF GT 730M / HD图形530 - GigE - Windows 7 Professional 64位版本/ Windows 10 Pro 64位版本降级 - 预装：Windows 7< DIV> < / DIV> < div class ='row'style ='min-height：0.05cm;'> < div class ='horizontalline'style ='left：1.11cm; width：19.05cm; height：0.00cm; border-color：＃C0C0C0;'>< / div> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：1.26cm; width：0.71cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000;'大于2< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：2.05cm; width：8.47cm; min-height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000 ;'> 24x7显示器：LG 32SL5B< / div> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：10.58cm; width：1.68cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; text-align：right;颜色：＃000000;'> 2015年12月29日< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：12.24cm; width：0.79cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; text-align：right;颜色：＃000000;'→3< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：13.08cm; width：1.08cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000;' > TK< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：14.32cm; width：1.26cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000;' > 878,79< / DIV> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < / DIV> < div class ='row'style ='min-height：0.00cm;'> < div class ='field'style ='left：16.61cm; width：1.42cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; text-align：right;颜色：＃000000;'> 580< / DIV> < / DIV> < div class ='row'style ='min-height：0.42cm;'> < div class ='field'style ='left：17.79cm; width：2.00cm; height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; font-weight：bold;文本对齐：右;颜色：＃000000;'> 1740< / DIV> < / DIV> < div class ='row'style ='min-height：0.51cm;'> < div class ='field'style ='left：2.24cm; width：9.79cm; min-height：0.42cm; z-Index：2; font-family：Arial; font-size：8pt; color：＃000000 ;> 450cd / m2，HDMI / DP / DVI / RGB / RJ45 /等，24/7操作，老挝< / div> < / DIV> < div class ='row'style ='min-height：0.05cm;'> < div class ='horizontalline'style ='left：1.11cm; width：19.05cm; height：0.00cm; border-color：＃C0C0C0;'>< / div> < / div>< / body>< / html>
首先，我建议你阅读一些基本的HTML表格，特别是表格。
要显示一行中的元素而不改变html，有两种方法：
显示：inline; 或 display：inline-block; （ inline-block
float：left;
出现在一行中，同时保持块级元素的优点这两个CSS规则都必须应用于所有要在一行中显示的元素，最好由一个相当具体的选择器（如）来显示。 list-element ，它会将所有元素作为目标 list-element 或 #mylist> div ，其目标是所有 div 元素，它们是id mylist 元素的直接后代。
html5 order print form below is created from existing template which contains fixed layout fields.
Every field appears in separate row:
How to fix this so that fields appear in same row? I tried to fix it by using absolute position:
.horizontalline, .field {
position: absolute;
}
In this case elemts apper is sme row properly but stretched product description field overwrites next row product name field:
How to fix this ?
Attributes, style can changed. It is possible to add additional elements.
Html basics structure (row element contains 0 or 1 field element) should preferably probably not changed since there is no better way to render absolutely positioned separate fields from exising non-html template.
Testcase:
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.row {
position: relative;
clear: both;
}
.field {
overflow: hidden;
word-break: break-all;
}
.horizontalline {
font-size: 1pt;
border: 1px solid #000000;
}
.horizontalline,
.field {
position: relative;
}
.horizontalline {
border-bottom-style: none !important;
}
</style>
</head>
<body>
<div class='row' style='min-height:0.05cm;'>
<div class='horizontalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:1.26cm;width:0.71cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>1</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:2.05cm;width:8.47cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>HP ProDesk 490 G3 - Micro tower - 1 x Core i7 6700</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:10.58cm;width:1.68cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>31.12.2015</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:12.24cm;width:0.79cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>1</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:13.08cm;width:1.08cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>tk</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:14.32cm;width:1.26cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'></div>
</div>
<div class='row' style='min-height:0.00cm;'>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:16.61cm;width:1.42cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>1189</div>
</div>
<div class='row' style='min-height:0.42cm;'>
<div class='field' style='left:17.79cm;width:2.00cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;font-weight:bold;text-align:right;color:#000000;'>1189</div>
</div>
<div class='row' style='min-height:0.51cm;'>
<div class='field' style='left:2.24cm;width:9.79cm;min-height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>RAM 16 GB - SSD 256 GB - DVD SuperMulti - GF GT 730M / HD Graphics 530 - GigE - Windows 7 Professional 64-bit Edition / Windows 10 Pro 64-bit Edition downgrade - pre-installed: Windows 7</div>
</div>
<div class='row' style='min-height:0.05cm;'>
<div class='horizontalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:1.26cm;width:0.71cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>2</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:2.05cm;width:8.47cm;min-height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>24x7 monitor: LG 32SL5B</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:10.58cm;width:1.68cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>29.12.2015</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:12.24cm;width:0.79cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>3</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:13.08cm;width:1.08cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>tk</div>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:14.32cm;width:1.26cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>878,79</div>
</div>
<div class='row' style='min-height:0.00cm;'>
</div>
<div class='row' style='min-height:0.00cm;'>
<div class='field' style='left:16.61cm;width:1.42cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;text-align:right;color:#000000;'>580</div>
</div>
<div class='row' style='min-height:0.42cm;'>
<div class='field' style='left:17.79cm;width:2.00cm;height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;font-weight:bold;text-align:right;color:#000000;'>1740</div>
</div>
<div class='row' style='min-height:0.51cm;'>
<div class='field' style='left:2.24cm;width:9.79cm;min-height:0.42cm;z-Index:2;font-family:Arial;font-size:8pt;color:#000000;'>450cd/m2, HDMI / DP / DVI / RGB / RJ45 /etc, 24/7 Operation, laos</div>
</div>
<div class='row' style='min-height:0.05cm;'>
<div class='horizontalline' style='left:1.11cm;width:19.05cm;height:0.00cm;border-color:#C0C0C0;'></div>
</div>
</body>
</html>
解决方案 First of all I recommend reading up on some basic HTML, tables specifically.
To display elements in a line without any changes in the html there are 2 approaches:
display: inline; or display: inline-block; (inline-block makes the element appear in a line while keeping the benefits of a block level element)float: left;
Both of the CSS rules have to be applied to all the elements you want to display in a row, preferrably by a rather specific selector like .list-element which would target all elements with the class list-element or #mylist > div which targets all div elements that are direct descendants of the element with id mylist.
这篇关于如何将元素放到同一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
