Ask about basic stuff_html/css_WEB-ITnose-HTML Tutorial-php.cn

Ask about basic stuff_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:51:25

Original

1036 people have browsed it

For example, if you want to display the following content in one line, what should you do? (Note: 1/2 needs to be written as a standard fraction, written in two lines, upper and lower)
"...Omit 30 words here...I want to enter a fraction: 1 1/2, what about this What to do? ...Omit 10 characters here..."

Let’s make a table. Just a few characters occupying one line is too wasteful and affects the layout. Let’s make a picture. It’s a bit more complicated. .

Are you paying attention?

Reply to discussion (solution)

You can try this idea

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

Copy after login

Branch using p tag

Thanks 2#, but my ie8 can’t be used.

Wrong writing, thanks to #1’s nth-child (ie8 cannot be used)

Branch uses p tag

Please give me an example, thank you.

In fact, it can be solved easily by using table. There is only one tr and td set valign="middle". When encountering a fraction, add a td and use
...
But there is a problem: p and table are all block elements and must occupy a separate line. They cannot stay on the same line as row elements (although they are inline, they are still not on the same horizontal line). When the expression to be displayed is very short (such as 1 1/2), it also occupies one line, which is too unsightly....

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

Copy after login

To jslang:
It’s still a problem that 1/2 and 1/100 cannot share the same class! Centering has to be debugged one by one, obviously it won’t work...

To jslang:
It’s still a problem that 1/2 and 1/100 cannot share the same class! You still have to debug one by one to get it in the middle, obviously it won’t work...

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

Copy after login

Okay, I’m convinced, I’ll give you extra points. It’s the end of the month and the end of the year. Happy New Year to everyone. .