javascript - 使选项卡正确对齐

标签 javascript html css

我正在尝试向面板添加选项卡,但选项卡未与从中生成的框对齐(对齐)。我应该怎么做才能纠正这个问题?这是实际代码:JSFiddle .我正在尝试制作如下屏幕截图所示的 View :

Screen

<main>
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Tab1</label>
  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Tab2</label>  
  <section id="content1"> 
    <form id="msform">
    <fieldset id="firstField">
        <h2 class="fs-title">Do yo have a fever?</h2>
        <input type="button" name="feveryes" class="next action-button" value="Yes" />
        <input type="button" name="feverno" class="next action-button" value="No" />
        <br><input type="button" name="previous" class="previous action-button" value="Reset" />
    </fieldset>
    <fieldset id="feveryes">
        <h2 class="fs-title">Do you have a cough?</h2>
        <input type="button" name="coughyes" class="next action-button" value="Yes" />
        <input type="button" name="coughno" class="next action-button" value="No" />
        <br><input type="button" name="previous" class="previous action-button" value="Reset" />
    </fieldset>
    <fieldset id="coughyes">
        <h2 class="fs-title">Go to Doctor!</h2>
        <br><input type="button" name="previous" class="previous action-button" value="Reset" />
    </fieldset>
    <fieldset id="feverno">
        <h2 class="fs-title">You are healthy!</h2>
        <br><input type="button" name="previous" class="previous action-button" value="Reset" />
    </fieldset>
    <fieldset id="coughno">
        <h2 class="fs-title">Be careful!</h2>
        <br><input type="button" name="previous" class="previous action-button" value="Reset" />
    </fieldset>  
</form>     
  </section>
<section id="content2">TEST TEST TEST
  </section>
</main>

最佳答案

只需删除部分的填充和表单的边距:

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
  padding: 0;
}


#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;

    box-sizing: border-box;
    width: 80%;
    //margin: 0 10%;  // no margin

    /*stacking fieldsets above each other*/
    position: absolute;
}

http://jsfiddle.net/2f6oovdd/

enter image description here

关于javascript - 使选项卡正确对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42305340/

相关文章:

javascript - 如何在 JavaScript 或 Node.js 中创建用于 JSON 序列化的安全对象

JavaScript 和问题

css - 如何使用带有 CSS 的基础框架创建方形图像缩略图

javascript - 如何在类组件 React 之外访问 Prop

javascript - React-Redux : Assigning a modified array to a property in the state

javascript - 如何通过值查找html元素

html - Rowspan 不使用顶行

javascript - div与其他div的高度相同

css - 当大于页面宽度时将父级 div 扩展到子级尺寸

javascript - 映射和拼接给出空而不是空