问个基础的东东解决方案

问个基础的东东
比如想将下面的内容在一行内显示出来，怎么办？（注：其中的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标签
------解决思路----------------------

引用:

Quote: 引用:

分行使用p标签

请来个例子，谢谢。

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

你写个样式不行？


 1
 /
 1


我帮你样式名称顶好了
你写出样式 变成上下数字 中间是横线
------解决思路----------------------

引用:

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>

问个基础的东东解决方案

相关推荐