带有单选按钮的表不起作用

Question

我尝试使用HTML和CSS创建一个漂亮的表，其中单选按钮靠近行名称。我对CSS非常新，所以我开始随机搜索一些代码，直到我的桌子好看。这是我的代码：

＆＃13;

＆＃13;

.attr-col {
  margin: 65px 0 0;
  float: left;
  width: 250px;
}
.attr-col ul {
  background: #f4f4f4;
  font-weight: bold;
  font-size: 13px;
  border: 1px solid #d6d6d6;
  border-width: 1px 0px 1px 1px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.attr-col ul li {
  text-align: left;
  padding: 0 10px;
  border-bottom: 1px solid #d6d6d6;
  line-height: 45px;
  display: block;
}
.pt-table {
  padding-left: 200px;
  display: block;
  position: relative;
}
.pt-body {
  padding: 10px 0 0;
}
.pt-rows li {
  display: block;
  overflow: hidden;
  background: #fff;
  border-left: 2px solid #ccc;
  border-right: 2px solid #ccc;
  border-bottom: 1px solid #d9d9d9;
}
.pt-rows li span {
  width: 24%;
  text-align: center;
  float: left;
  border-right: 1px solid #d9d9d9;
  display: block;
  line-height: 45px;
  height: 45px;
}
.pt-rows li.title {
  background: #666;
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  border-bottom: 2px solid #555;
  border-width: 0 0 2px;
}
.pt-rows li.title span {
  line-height: 50px;
  height: 50px;
  border: none;
  padding: 0 1px;
  text-shadow: 2px 2px #444;
}
.pt-rows li span.pt-3x {
  width: 72%;
  float: left;
  text-align: center;
  border: none;
}

＆＃13;

<div class="price-chart">
  <div class="attr-col">
    <ul>
      <div id="var">
        <li class="radio">
          <input type="radio" name="var" id="var1" value="V1" checked="checked" />Observation
        </li>
        <li class="radio">
          <input type="radio" name="var" id="var1" value="V2" />Income &#8364;</li>
        <li class="radio">
          <input type="radio" name="var" id="var3" value="V3" />Sold &#8364;</li>
        <li class="radio">
          <input type="radio" name="var" id="var4" value="V4" />Up (%)</li>
      </div>
    </ul>
  </div>
  <div class="pt-table">
    <div class="pt-body">
      <ul class="pt-rows">
        <li class="title"><span>category 1</span><span>category 2</span><span>category 3</span><span>category 4</span>
        </li>
        <li><span>-</span><span>-</span><span>-</span><span>-</span>
        </li>
        <li><span>-</span><span>-</span><span>-</span><span>-</span>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我在最后两行只留下了行名，以显示这里的单选按钮有效。虽然在第一行不行！我确定错误是我的CSS代码，但我不明白为什么。

Answer 1

变化

.pt-table { padding-left: 200px; display: block; position: relative; }

到

.pt-table { margin-left: 200px; display: block; position: relative; }

.attr-col {
  margin: 65px 0 0;
  float: left;
  width: 250px;
}
.attr-col ul {
  background: #f4f4f4;
  font-weight: bold;
  font-size: 13px;
  border: 1px solid #d6d6d6;
  border-width: 1px 0px 1px 1px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.attr-col ul li {
  text-align: left;
  padding: 0 10px;
  border-bottom: 1px solid #d6d6d6;
  line-height: 45px;
  display: block;
}
.pt-table {
  margin-left: 200px;
  display: block;
  position: relative;
}
.pt-body {
  padding: 10px 0 0;
}
.pt-rows li {
  display: block;
  overflow: hidden;
  background: #fff;
  border-left: 2px solid #ccc;
  border-right: 2px solid #ccc;
  border-bottom: 1px solid #d9d9d9;
}
.pt-rows li span {
  width: 24%;
  text-align: center;
  float: left;
  border-right: 1px solid #d9d9d9;
  display: block;
  line-height: 45px;
  height: 45px;
}
.pt-rows li.title {
  background: #666;
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  -webkit-border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  border-bottom: 2px solid #555;
  border-width: 0 0 2px;
}
.pt-rows li.title span {
  line-height: 50px;
  height: 50px;
  border: none;
  padding: 0 1px;
  text-shadow: 2px 2px #444;
}
.pt-rows li span.pt-3x {
  width: 72%;
  float: left;
  text-align: center;
  border: none;
}

<div class="price-chart">
  <div class="attr-col">
    <ul>
      <div id="var">
        <li class="radio">
          <input type="radio" name="var" id="var1" value="V1" checked="checked" />Observation
        </li>
        <li class="radio">
          <input type="radio" name="var" id="var1" value="V2" />Income &#8364;</li>
        <li class="radio">
          <input type="radio" name="var" id="var3" value="V3" />Sold &#8364;</li>
        <li class="radio">
          <input type="radio" name="var" id="var4" value="V4" />Up (%)</li>
      </div>
    </ul>
  </div>
  <div class="pt-table">
    <div class="pt-body">
      <ul class="pt-rows">
        <li class="title"><span>category 1</span><span>category 2</span><span>category 3</span><span>category 4</span>
        </li>
        <li><span>-</span><span>-</span><span>-</span><span>-</span>
        </li>
        <li><span>-</span><span>-</span><span>-</span><span>-</span>
        </li>
      </ul>
    </div>
  </div>
</div>