Heim >Web-Frontend >HTML-Tutorial >问个基础的东东_html/css_WEB-ITnose
问个基础的东东_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:251038Durchsuche
比如想将下面的内容在一行内显示出来，怎么办？（注：其中的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> 好吧，服了，加分结贴，月底了，年底了，注大家元旦快乐。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：web前端学习笔记-scrollWidth,clientWidth,offsetWidth的区别_html/css_WEB-ITnoseNächster Artikel：CSS3制作苹果风格键盘_html/css_WEB-ITnose