CSS规则

-3

html { 
 
    font-family: "Open Sans", sans-serif; 
 
    font-weight: 100; 
 
    background-color: #fbfbfb; 
 
} 
 

 
body { 
 
    font-family: "Open Sans", sans-serif; 
 
    font-weight: 100; 
 
} 
 

 
body h1 { 
 
    font-weight: 100; 
 
} 
 

 
body h3 { 
 
    font-family: "Open Sans", sans-serif; 
 
    font-size: 16px; 
 
} 
 

 
.widget-container { 
 
    width: 100%; 
 
    position: fixed; 
 
    top: 70%; 
 
    left: 50%; 
 
    transform: translate(-50%, -47%); 
 
} 
 

 
.widget-title { 
 
    text-align: center; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    font-weight: bold; 
 
} 
 

 
.widget-Gtitle { 
 
    text-align: center; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    font-weight: bold; 
 
    font-size: 13px; 
 
} 
 

 
.kpi-container { 
 
    list-style-type: none; 
 
    margin: auto; 
 
    border-spacing: 10px 1px; 
 
    text-align: right; 
 
} 
 

 
.kpi-entry { 
 
    text-align: center; 
 
    margin-bottom: 10px; 
 
} 
 

 
.kpi-value { 
 
    font-size: 16px; 
 
    text-align: right; 
 
} 
 

 
.kpi-Gvalue { 
 
    font-size: 13px; 
 
    text-align: right; 
 
} 
 

 
.kpi-Glabel { 
 
    font-size: 13px; 
 
    text-align: right; 
 
} 
 

 
.kpi-label { 
 
    font-size: 16px; 
 
    text-align: right; 
 
} 
 

 
.kpi-icon { 
 
    display: inline-block; 
 
    width: 13px; 
 
    height: 13px; 
 
} 
 

 
.green { 
 
    background: #009c00; 
 
} 
 

 
.red { 
 
    background: #ff0000; 
 
} 
 

 
.amber { 
 
    background: #FFC200; 
 
} 
 

 
.arrowGreen { 
 
    fill: #009c00; 
 
    width: 15px; 
 
    height: 15px; 
 
} 
 

 
.arrowRed { 
 
    fill: #ff0000; 
 
    width: 15px; 
 
    height: 15px; 
 
}

<html> 
 

 
<head> 
 

 
</head> 
 

 
    <ol id="error-list" class="error-list"></ol> 
 
    <div id="widget-title" class="widget-Gtitle">EBIT Margin %</div> 
 
    <div id="widget-container" class="widget-container"> 
 
    <table class="kpi-container"> 
 
     <tbody> 
 
     <tr class="kpi-entry"> 
 
      <td> 
 
      <div class="kpi-Glabel">Current</div> 
 
      </td> 
 
      <td> 
 
      <div id="ragCurrentBox"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="kpi-icon arrowGreen"> 
 
<g> 
 
\t <g> 
 
\t \t <path id="svgInternalID" d="M446.906,261.969c-1.792-3.656-5.5-5.969-9.573-5.969h-96V10.667C341.333,4.771,336.563,0,330.667,0H181.333 c-5.896,0-10.667,4.771-10.667,10.667V256h-96c-4.073,0-7.781,2.313-9.573,5.969c-1.792,3.646-1.354,8,1.135,11.219 l181.333,234.667c2.021,2.615,5.135,4.146,8.438,4.146s6.417-1.531,8.438-4.146l181.333-234.667 C448.26,269.969,448.698,265.615,446.906,261.969z"></path> 
 
\t </g> 
 
</g> 
 
</svg></div> 
 
      </td> 
 

 
      <td> 
 
      <div id="valueCurrent" class="kpi-Gvalue">0.58%</div> 
 
      </td> 
 
     </tr> 
 
     <tr class="kpi-entry"> 
 
      <td> 
 
      <div class="kpi-Glabel">YTD</div> 
 
      </td> 
 
      <td> 
 
      <div id="ragYTDBox"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" class="kpi-icon arrowGreen"> 
 
<g> 
 
\t <g> 
 
\t \t <path id="svgInternalID" d="M446.906,261.969c-1.792-3.656-5.5-5.969-9.573-5.969h-96V10.667C341.333,4.771,336.563,0,330.667,0H181.333 c-5.896,0-10.667,4.771-10.667,10.667V256h-96c-4.073,0-7.781,2.313-9.573,5.969c-1.792,3.646-1.354,8,1.135,11.219 l181.333,234.667c2.021,2.615,5.135,4.146,8.438,4.146s6.417-1.531,8.438-4.146l181.333-234.667 C448.26,269.969,448.698,265.615,446.906,261.969z"></path> 
 
\t </g> 
 
</g> 
 

 
</svg></div> 
 
      </td> 
 
      <td> 
 
      <div id="valueYTD" class="kpi-Gvalue">0.57%</div> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</body> 
 

 
</html>

我有在同一页上有两个小部件的HTML5的问题。对齐方式关闭，您可以在两个小工具上看到字幕Current和YTD。