inputタグの行頭を揃えたい

現在、Facebookの模写を行っています。
入力欄をinputタグを用いて作っていますがこれの行頭がほかの要素と揃わないのでこれを揃えたいです。

CSS
1
2.f-container {
3    display: flex;
4    flex-direction: row;
5    justify-content: flex-start;
6    padding: 0 180px;
7    height: 100%;
8    
9}
10.f-item {
11    display: inline-block;
12    vertical-align: middle;
13    width: 450px;
14}
15.f-item h1 {
16    font-family: helvetica,arial,"hiragino";
17    font-size: 36px;
18    font-weight: 600;
19    height: 48px;
20    line-height: 48.24px;
21    margin-bottom: 5px;
22}
23.f-item2 p2 {
24    font-size: 19px;
25    font-weight: 400;
26    height: 25px;
27    line-height: 25.46px;
28    margin-bottom: 20px;
29}
30input[type=text]{ 
31    width: 194px;
32    height: 39px;
33    display:inline-block;
34    
35}
36.f-item2 ul {
37 list-style: none;
38}
39.f-item2 li {
40    margin-right: 30px;
41    margin-left: 2em;
42	text-indent: -8em;
43}
44.f-item2 ul li input[type=text] { 
45    display: block;
46}
47li input[type=text] {
48  width: 388px;
49  height: 39px;
50}
51p3 {
52    font-size: 10px;
53    margin-bottom: 10px;
54}
55button2{
56 background-color: green;
57 padding: 5px 25px;
58 color: white;
59}
60p4 {
61    font-size: 10px;
62}

HTML
1
2 <div class="top-wrapper">
3          <div class="f-container">
4             <div class="f-item1"><p>Facebookを使うと、友達や同僚、同級生、仲間たちとつながりを深められます。ケータイ、スマートウォフォンからもアクセス出来ます。</p>
5                <img src="https://static.xx.fbcdn.net/rsrc.php/v3/yi/r/OBaVg52wtTZ.png">
6             </div>
7              <div class="f-item2"><h1>アカウント登録</h1>
8              <p2>簡単に登録出来ます。<br></p2>
9              <input type="text" value="" placeholder="姓" >
10              <input type="text" value="" placeholder="名" >
11                <ul>  
12                <li><input type="text" value="" placeholder="携帯電話番号またはメールアドレス"></li>
13                <li><input type="text" value="" placeholder="パスワード"></li>
14                </ul>
15                <p>誕生日</p>
16                <select name="year"> <option value="">-</option> <option value="1900">1900</option> <option value="1901">1901</option> <option value="1902">1902</option> <option value="1903">1903</option> <option value="1904">1904</option> <option value="1905">1905</option> <option value="1906">1906</option> <option value="1907">1907</option> <option value="1908">1908</option> <option value="1909">1909</option> <option value="1910">1910</option> <option value="1911">1911</option> <option value="1912">1912</option> <option value="1913">1913</option> <option value="1914">1914</option> <option value="1915">1915</option> <option value="1916">1916</option> <option value="1917">1917</option> <option value="1918">1918</option> <option value="1919">1919</option> <option value="1920">1920</option> <option value="1921">1921</option> <option value="1922">1922</option> <option value="1923">1923</option> <option value="1924">1924</option> <option value="1925">1925</option> <option value="1926">1926</option> <option value="1927">1927</option> <option value="1928">1928</option> <option value="1929">1929</option> <option value="1930">1930</option> <option value="1931">1931</option> <option value="1932">1932</option> <option value="1933">1933</option> <option value="1934">1934</option> <option value="1935">1935</option> <option value="1936">1936</option> <option value="1937">1937</option> <option value="1938">1938</option> <option value="1939">1939</option> <option value="1940">1940</option> <option value="1941">1941</option> <option value="1942">1942</option> <option value="1943">1943</option> <option value="1944">1944</option> <option value="1945">1945</option> <option value="1946">1946</option> <option value="1947">1947</option> <option value="1948">1948</option> <option value="1949">1949</option> <option value="1950">1950</option> <option value="1951">1951</option> <option value="1952">1952</option> <option value="1953">1953</option> <option value="1954">1954</option> <option value="1955">1955</option> <option value="1956">1956</option> <option value="1957">1957</option> <option value="1958">1958</option> <option value="1959">1959</option> <option value="1960">1960</option> <option value="1961">1961</option> <option value="1962">1962</option> <option value="1963">1963</option> <option value="1964">1964</option> <option value="1965">1965</option> <option value="1966">1966</option> <option value="1967">1967</option> <option value="1968">1968</option> <option value="1969">1969</option> <option value="1970">1970</option> <option value="1971">1971</option> <option value="1972">1972</option> <option value="1973">1973</option> <option value="1974">1974</option> <option value="1975">1975</option> <option value="1976">1976</option> <option value="1977">1977</option> <option value="1978">1978</option> <option value="1979">1979</option> <option value="1980">1980</option> <option value="1981">1981</option> <option value="1982">1982</option> <option value="1983">1983</option> <option value="1984">1984</option> <option value="1985">1985</option> <option value="1986">1986</option> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990">1990</option> <option value="1991">1991</option> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> <option value="2000">2000</option> <option value="2001">2001</option> <option value="2002">2002</option> <option value="2003">2003</option> <option value="2004">2004</option> <option value="2005">2005</option> <option value="2006">2006</option> <option value="2007">2007</option> <option value="2008">2008</option> <option value="2009">2009</option> <option value="2010">2010</option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> <option value="2017">2017</option> <option value="2018">2018</option> <option value="2019">2019</option> <option value="2020">2020</option> <option value="2021">2021</option> <option value="2022">2022</option> <option value="2023">2023</option> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> </select>　年
17                <select name="month"> <option value="">-</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>　月        
18                <select name="month"> <option value="">-</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> </select>　月
19               <p>性別</p>
20               <input type="radio" name="性別" value="男" /> 男性　
21               <input type="radio" name="性別" value="女" /> 女性
22               <input type="radio" name="性別"　value="カスタム"/> カスタム<br>
23               <p3>[アカウント登録]をクリックすることで、利用規約、データに関するポリシー 、Cookieポリシーに同意するものとします。サービスに関連してFacebookからSMS通知が届くことがありますが、これはいつでもオフに設定できます。<br></p3>
24               <button2 class="button3" type="submit">アカウント登録<br></button2>
25               <p4>有名人、バンド、ビジネスのために<a href="#">facebookのページを作成</a></p4>
26              </div>     
27          
28              </div>
29      </div>

floatやmargin,marginとtext-indentなどを用いて調整を試みましたがなかなか思うようにいきませんでした。
初歩的なミスもあるかもしれませんがご指導のほどよろしくお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

リストタグは、余白がついているので、
調整する必要があります。

html
1.f-item2 ul {
2        list-style: none;
3        padding: 0;/* 調整してください*/
4}
5.f-item2 li {
6        margin-right: 30px;
7        /* margin-left: 2em; ←不要です*/
8        text-indent: -8em;
9}

ご確認ください。

投稿2020/08/27 00:45

ColaFloat

総合スコア18

ehryo

2020/08/28 00:45

回答ありがとうございます。リストタグに余白がつくのですね！　恥ずかしながら初めて知ったので勉強になりました。ありがとうございました！

行動規範の内容に同意します

.f-item2 liのmargin-leftを削除して、ulのpaddingを0にしました。

CSS
1.f-container {
2  display: flex;
3  flex-direction: row;
4  justify-content: flex-start;
5  padding: 0 180px;
6  height: 100%;
7}
8.f-item {
9  display: inline-block;
10  vertical-align: middle;
11  width: 450px;
12}
13.f-item h1 {
14  font-family: helvetica, arial, "hiragino";
15  font-size: 36px;
16  font-weight: 600;
17  height: 48px;
18  line-height: 48.24px;
19  margin-bottom: 5px;
20}
21.f-item2 p2 {
22  font-size: 19px;
23  font-weight: 400;
24  height: 25px;
25  line-height: 25.46px;
26  margin-bottom: 20px;
27}
28input[type="text"] {
29  width: 194px;
30  height: 39px;
31  display: inline-block;
32}
33.f-item2 ul {
34  list-style: none;
35}
36.f-item2 li {
37  margin-right: 30px;
38  
39  text-indent: -8em;
40}
41.f-item2 ul li input[type="text"] {
42  display: block;
43}
44li input[type="text"] {
45  width: 388px;
46  height: 39px;
47}
48p3 {
49  font-size: 10px;
50  margin-bottom: 10px;
51}
52button2 {
53  background-color: green;
54  padding: 5px 25px;
55  color: white;
56}
57p4 {
58  font-size: 10px;
59}
60.f-item2 ul {
61  padding: 0;
62}
63