横幅を同じ％にしているのに表示が異なる

Question

widthを68％でinputとselectの両方にあてているのですが
表示してみるとselectの方がinputと比べて、横幅が短く表示されます。
％は親要素の幅で決まるのであれば、両方ともliタグで差異が出ないはずなのですが、、
ディベロッパーツールでもwidth: 68%と両方に指定されています

原因が分かりません。
コードは以下の通りです。⇓

  <!-- contact -->
  <div class="outer" id="contact">
    <h1 class="title">Contact</h1>
    <form action="post">
      <ul class="contact-ul">
        <li>
          <label class="required" for="your-name">お名前</label>
          <input class="name" id="your-name" type="text" name="name" placeholder="山田太郎">
        </li>
        <li>
          <label class="required" for="e-mail">メールアドレス</label>
          <input class="name" id="e-mail" type="email" name="name" placeholder="[e-mail]">
        </li>
        <li>
          <label>お問い合わせ種別</label>
          <select name="select">
            <option value="none">ーーー</option>
            <option value="phone">お電話</option>
            <option value="e-mail">メール</option>
          </select>
        </li>
　　・・・
</div>

// input
.name {
  appearance: none;
  background-color: transparent;
  background-image: none;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.16);
  color: inherit;
  font-family: inherit;
  font-size: 1em;
  &:focus {
    border: 1px solid rgba(0, 0, 0, 0.32);
    box-shadow: none;
    outline: none;
  }
}

// select
select {
  -webkit-appearance: none;
  background: transparent url(https://haniwaman.com/wp-content/uploads/2018/12/form-css-arrow.png) no-repeat center
    right 8px/16px 16px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  color: #dcdcdc;
  font-size: 1em;
  padding: 13px 8px;
  &:focus {
    border: 1px solid rgba(0, 0, 0, 0.32);
    box-shadow: none;
    outline: none;
  }
}

input,
select,
textarea {
  width: 68%; //ここです。
  padding: 13px 8px;
  resize: none;
  &::placeholder {
    color: #dcdcdc;
  }
}

どなたかご回答いただければ幸いです。

Answer 1

こちらでいかがでしょうか?

label {
  display: inline-flex;
  width: calc(100% - 68% - 0.5em); /* 10pxは余白、好きなように設定してください */
}
input,
select,
textarea {
  display: inline-flex;
  width: 68%;
  box-sizing: border-box;
}

<li>か<li>の子要素に<div>を追加し、`display: flex;`を指定をするのもありだと思います。

---

追記:

表示してみるとselectの方がinputと比べて、横幅が短く表示されます。

box-sizing: border-box;により、サイズのズレはなくなりました。
paddingの指定をwidthに含めるかどうか、という設定なのですが、
おそらくselectとinputとでこの設定に差異があったのだと思います。

Comments

[NDvP2OWLAoccEfQ]

ご回答ありがとうございます！
これはflex-inlineのコンテナを二つ作って
そのコンテナに幅を指定しているのですか？
すみません、理解力がなくて、、

[new1ro]

> これはflex-inlineのコンテナを二つ作って

何か箱を作って、その中にlabelやinputなどを含めているわけではなく、
labelやinput自体に「display: inline-flex;」を指定しています。
「display: inline-block;」でも構いません。

横並びにするかつ、ブロック要素的にも扱いたいときは
「display: inline-flex;」「display: inline-block;」をよく使うので指定しました。

------------------------------------------------------------

> そのコンテナに幅を指定しているのですか？

幅を指定しているのは、そのとおりです。
width: calc(100% - 68% - 0.5em);
がややこしいと思うのですが、
width: calc(32% - 0.5em);
でも構いません。

[new1ro]

> 表示してみるとselectの方がinputと比べて、横幅が短く表示されます。

こちらについて、回答に追記いたしましたので、あわせてご確認ください。

[NDvP2OWLAoccEfQ]

詳細な説明、本当にありがとうございます。
おかげで完璧に理解しました！
inputがcontent-boxになってたんですね！
flex-inlineの方も理解しました。

[new1ro]

解決できたようで、よかったです！