问个基础的东东

一如既往哈 2014-12-30 10:57:52

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

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

大家有没有好注意啊？

...全文

110 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

一如既往哈 2014-12-31

打赏
举报

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

天际的海浪 2014-12-31

打赏
举报

引用 9 楼 Topc008 的回复:

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>

一如既往哈 2014-12-31

打赏
举报

引用 2 楼 duanzi_peng 的回复:

分行使用p标签

一如既往哈 2014-12-31

打赏
举报

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

天际的海浪 2014-12-31

打赏
举报


<!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>

一如既往哈 2014-12-31

打赏
举报

引用 6 楼 KK3K2005 的回复:

[quote=引用 5 楼 Topc008 的回复:] [quote=引用 2 楼 duanzi_peng 的回复:] 分行使用p标签

请来个例子，谢谢。其实用table可以很好解决，只有一个tr，td都设置valign="middle"，遇到分式的时候增加一个td，里面使用 ...... 但有一个问题：p和table等都是块元素，必须单独占一行，没法和行元素待在一行上(虽然inline但仍然不在同一水平线)。当要展示的式子很短（诸如1+1/2）时，也占一行，那就太不美观了....[/quote] 你写个样式不行？ 1 / 1 我帮你样式名称顶好了你写出样式变成上下数字中间是横线[/quote] 这不行，不通用。1/2和1/100就不能共用一个class，要是再套一个分式.....

KK3K2005 2014-12-31

打赏
举报

引用 5 楼 Topc008 的回复:

[quote=引用 2 楼 duanzi_peng 的回复:] 分行使用p标签

whqet 2014-12-30

打赏
举报

可以试试这种思路


<!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>

一如既往哈 2014-12-30