Question

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>
	<g>
		<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>
	</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>
	<g>
		<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>
	</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。

请问有人对此有所了解，这里是CSS规则，它们都来自同一个css文件。即使正确的单位是不同的长度，例如1和£x.xx，我希望标题和箭头完美排列。

Answer 1

您是否尝试将其更改为：display：inline;

用于在单独的HTML5中进行对齐的CSS规则

1 个答案: