<fieldset>标签 

<!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控制文字在一条线的中间

A相
  • I:10A
  • U:10V
  • P:10KW
B相
  • I:10A
  • U:10V
  • P:10KW
C相
  • I:10A
  • U:10V
  • P:10KW
posted @ 2017-02-08 14:52  瘋孑  阅读(276)  评论(0)  编辑  收藏  举报