需要帮助将 HTML+CSS 选项卡移动到相应内容窗格下方

Question

我使用单选按钮为网页创建一个简单的标签栏，仅使用 HTML 和 CSS。

<ul class="tabs">
<li>
    <input type="radio" name="tabs" id="tab1" checked />
    <label for="tab1">Description</label>
    <div id="tab-content1" class="tab-content">
      <p>content 1</p>
    </div>
  </li>

 <li>
    <input type="radio" name="tabs" id="tab2" />
    <label for="tab2">Specification</label>
    <div id="tab-content2" class="tab-content">
      <p>content 2</p>
    </div>
</li>

如何移动 内容下方 的标签，如下所示：http://i.imgur.com/FzVB9TD.png

谢谢转发

Answer 1

是的，只需将 CSS top: 53px; 更改为 bottom:0;

CSS

.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 25px;
  padding: 25px;
  position: absolute;
  bottom: 0px; // Here is the change
  left: 0;
  background: #E6E6E6;
}

DEMO HERE

需要帮助将 HTML+CSS 选项卡移动到相应内容窗格下方

Need help moving HTML+CSS Tabs below the respective content pane

html

css

tabs