<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS控制文字在一条线的中间</title> <style type="text/css"> * { font-size:12px; margin:0; padding:0; } fieldset { padding:10px; margin:10px; width:150px; color:#333; border:#06c dashed 1px; } legend { color:#06c; font-weight:800; background:#fff; } ul { list-style-type: none; margin:8px 0 4px 0; } li { margin-top:4px; } </style> </head> <body> <fieldset style="float: left"> <legend>A相</legend> <ul> <li> I:10A </li> <li> U:10V </li> <li> P:10KW </li> </ul> </fieldset> <fieldset style="float: left"> <legend>B相</legend> <ul> <li> I:10A </li> <li> U:10V </li> <li> P:10KW </li> </ul> </fieldset> <fieldset style="float: left"> <legend>C相</legend> <ul> <li> I:10A </li> <li> U:10V </li> <li> P:10KW </li> </ul> </fieldset> <fieldset style="float: left"> <legend>汇总</legend> <ul> <li> I:10A </li> <li> U:10V </li> <li> P:10KW </li> </ul> </fieldset> </body> </html>
CSS控制文字在一条线的中间