Home >Web Front-end >HTML Tutorial >Ask about basic stuff_html/css_WEB-ITnose
Ask about basic stuff_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:251038browse
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> 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 0c6dc11e160d3b678d68754cc175188a...
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> 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> 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. .