li内の上下を等間隔にしたい.

Question

非常に初歩的であると思いますが,以下の質問をさせてください.

formにliを用いてリストを作成したいです.
htmlは以下になります.

<form>
  <ul>
    <li>
      <label>発生日時</label>
      <input type="datetime-local"  id="dlgDateTime" value="2018-02-04T11:28" />
    </li>
    <li>
      <label>タイトル</label>
      <input type="text"  id="dlgTitle" value="タイトル1" />
    </li>
    <li>
      <label class = "dlg_label_with_textarea">詳細</label>
      <textarea   id="dlgDetail" row="3" value="ac" ></textarea>
    </li>
  </ul>
</form>

表示させたところ,以下の図のようになってしまいます.

どうしても上下の間隔が不均一になります.
どのようにすれば,等間隔に配置できますでしょうか?

Comments

[kei344]

CSSも提示ください。

[yoshinavi]

CSSの質問の場合は該当するHTML・CSSコードを提示されると、より良い回答が得れると思います。今の提示コードはCSSでなくHTMLのみになっています。

Answer 1

input要素とtextareaの間隔を整えたいのであれば、まずデフォルト（ブラウザCSS）の値を調べるとよいかもしれません。

inputとtextareaはline-heightの値がデフォルトでは同じでは無いようです。
またtextareaには上下にmarginが入ります。
borderの値も異なるので必要であればborderも同じように指定するのがいいかもしれません。

<style type="text/css"> li{ margin: 0; padding: 0; margin-bottom: 16px; font-size: 16px; line-height: 1.58; } label{ margin-right: 16px; vertical-align: middle; } li:last-child label{ vertical-align: top; } input, textarea{ margin: 0; padding: 0; border:solid 1px #ccc; font-size: 100%; line-height: inherit; } </style> <form> <ul> <li><label>発生日時</label><input type="datetime-local"></li> <li><label>タイトル</label><input type="text"></li> <li><label>詳細</label><textarea></textarea></li> </ul> </form>