-1
私は試しましたが、上部のul-elementの新しいパディングの理由を見つけられませんでした（新しいアクティビティー、アクティビティー・プロファイル、アクティビティーの詳細）。パディングの原因を見つけることができません - CSS
何らかの理由で、左側に40ピクセルのパディングがあり、その理由がわかりません！ JSFiddleには、私のプロジェクトのすべてのCSSコードが含まれているので、フォームスタイルを妨げる可能性があります。そのため、JSFiddleをより広い視野で見てください。
/*form styles*/
#msform {
\t width: 400px;
\t margin: 50px auto;
\t text-align: center;
\t position: relative;
}
#msform fieldset {
\t background: white;
\t border: 0 none;
\t border-radius: 3px;
\t box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
\t padding: 20px 30px;
\t box-sizing: border-box;
\t width: 80%;
\t margin: 0 10%;
\t
\t /*stacking fieldsets above each other*/
\t position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
\t display: none;
}
/*inputs*/
#msform input, #msform textarea {
\t padding: 15px;
\t border: 1px solid #ccc;
\t border-radius: 3px;
\t margin-bottom: 10px;
\t width: 100%;
\t box-sizing: border-box;
\t font-family: montserrat;
\t color: #2C3E50;
\t font-size: 13px;
}
/*buttons*/
#msform .action-button {
\t width: 100px;
\t background:#70ffac;
\t font-weight: bold;
\t color: white;
\t border: 0 none;
\t border-radius: 1px;
\t cursor: pointer;
\t padding: 10px 5px;
\t margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
background: #8ff3b9;
}
/*headings*/
.fs-title {
\t font-size: 15px;
\t text-transform: uppercase;
\t color: #2C3E50;
\t margin-bottom: 10px;
}
.fs-subtitle {
\t font-weight: normal;
\t font-size: 13px;
\t color: #666;
\t margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
\t margin-bottom: 30px;
\t overflow: hidden;
\t /*CSS counters to number the steps*/
\t counter-reset: step;
}
#progressbar li {
\t list-style-type: none;
\t text-transform: uppercase;
\t font-size: 9px;
\t width: 33.33%;
\t float: left;
\t position: relative;
}
#progressbar li:before {
\t content: counter(step);
\t counter-increment: step;
\t width: 20px;
\t line-height: 20px;
\t display: block;
\t font-size: 10px;
\t color: #fff;
\t background: #baffd7;
\t border-radius: 3px;
\t margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
\t content: '';
\t width: 100%;
\t height: 2px;
\t background: #baffd7;
\t position: absolute;
\t left: -50%;
\t top: 9px;
\t z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
\t /*connector not needed before the first step*/
\t content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
\t background: #70ffac;
\t color: white;
}<form id="msform">
<ul id="progressbar">
<li class="active">new Activity</li>
<li>Activity Profile</li>
<li>Activity Details</li>
</ul>
<fieldset>
<h2 class="fs-title">Create new activity</h2>
<h4 class="fs-subtitle">Describe</h4>
<input type="text" name="email" placeholder="Title" />
<textarea name="description" placeholder="Description"></textarea>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
</form>ここJSFiddleです：https://jsfiddle.net/2fasm5gs/
誰かが私を案内していただけますか？
私たちがそれを見つけている間、あなたはその#progressbar { パディング左を知っています： 0; }ちょうどそれを修正しますか？ – Sergi
あなたは 'ul'要素のデフォルトの埋め込みを意味し、ユーザーエージェントのスタイルシートから来ています...？ – CBroe
はい、@CBroeの質問を編集しました – Jesper