我正在尝试向面板添加选项卡,但是选项卡不能与从它们派生的框对齐(对齐)。我应该怎么做才能纠正这个问题?下面是实际的代码:JSFiddle。我正在尝试创建一个如下截图所示的视图:

<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>发布于 2017-02-18 02:58:14
只需删除部分中的填充和表单中的页边距:
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/

https://stackoverflow.com/questions/42305340
复制相似问题