首頁 >web前端 >html教學 >问个基础的东东_html/css_WEB-ITnose

问个基础的东东_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:51:251038瀏覽

比如想将下面的内容在一行内显示出来,怎么办?(注:其中的1/2需要写成标准的分式,分上下2行写)
“...此处省略30字 ...我想输入一个分式:1+1/2,这个咋办?...此处省略10字...”

弄个table吧,就那么几个字符占一行太浪费了,而且影响版容,弄个图片吧,又复杂了点。

大家有没有好注意啊?


回复讨论(解决方案)

可以试试这种思路

<!DOCTYPE html><html>	<head>		<meta charset="utf-8" />		<title></title>		<style type="text/css">			.percent{				position: relative;			}			.percent span:nth-child(1){				border-bottom: 1px solid #000;				position: absolute;				top: -2px;			}			.percent span:nth-child(2){				position: absolute;				top: 15px;			}		</style>	</head>	<body>		<div class="percent">			<span>1</span>			<span>2</span>		</div>	</body></html>

分行 使用p标签

谢谢2#,不过我那ie8用不了。

写错了,谢#1的nth-child(ie8不能用)

分行 使用p标签


请来个例子,谢谢。

其实用table可以很好解决,只有一个tr,td都设置valign="middle",遇到分式的时候增加一个td,里面使用
......
但有一个问题:p和table等都是块元素,必须单独占一行,没法和行元素待在一行上(虽然inline但仍然不在同一水平线)。当要展示的式子很短(诸如1+1/2)时,也占一行,那就太不美观了....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> new document </title><style type="text/css">#ft {	position: relative;	top: 0.5em;}#fb {	position: absolute;	top: -1em;	text-decoration: underline;}</style></head><body><br /><br />fffff 1+<span id="ft"><span id="fb">1</span>2</span> nnnnnnnnn</html></body></html>

To jslang :
还是 1/2和1/100就不能共用一个class的问题!居中还得一个一个调试,显然不行的.......

To jslang :
还是 1/2和1/100就不能共用一个class的问题!居中还得一个一个调试,显然不行的.......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title> new document </title><style type="text/css">.ft {	position: relative;	margin-right: 30px;}.fb {	position: absolute;	top: -0.5em;	left: 0px;	width: 30px;	text-align: center; }.fm {	position: absolute;	top: 0.5em;	left: 0px;	width: 30px;	text-align: center;	border-top: 1px solid #000;}</style></head><body><br /><br /><br /><br />fffff 1+<span class="ft"><div class="fb">1</div><div class="fm">2</div></span>+<span class="ft"><div class="fb">1</div><div class="fm">100</div></span> nnnnnnnnn</body></html>

好吧,服了,加分结贴,月底了,年底了,注大家元旦快乐。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn