Question

我试图制作一个待办事项列表，但每当我将文字缩小时，按钮总会有点上升。有什么帮助吗？

＆＃13;

* {
  margin: 0;
  padding: 0;
}
input:first-letter {
  text-transform: capitalize;
}
input {
  height: 19px;
  margin-top: 20px;
  background-color: #222222;
  border: 0px;
  color: white;
  text-align: center;
  height: 50px;
  width: 299px;
  font-size: 20px;
}
button {
  height: 52px;
  width: 51px;
  font-size: 40px;
  background-color: #0095FF;
  border: 0px;
  color: white;
}
button:hover {
  background-color: #0077FF;
}
#output {
  background-color: #EEEEEE;
  width: 350px;
  height: 600px;
}

＆＃13;

<form id="form">
  <input id="input" placeholder="To-Do List"></input>
  <!--
-->
  <button id="+">+</button>
</form>
<div id="output"></div>

＆＃13;

如果可能的话，请告诉我如何在没有任何外部库的情况下自动将输入的第一个字母大写？

感谢。

Answer 1

＆＃13;

* {
  margin: 0;
  padding: 0;
}
input:first-letter {
  text-transform: capitalize;
}
input {
  height: 19px;
  background-color: #222222;
  border: 0px;
  color: white;
  text-align: center;
  height: 50px;
  width: 299px;
  font-size: 20px;
  text-transform:capitalize;
}
button {
  height: 50px;
  width: 51px;
  font-size: 35px;
  background-color: #0095FF;
  border: 0px;
  color: white;
}
button:hover {
  background-color: #0077FF;
}
#output {
  background-color: #EEEEEE;
  width: 350px;
  height: 600px;
}
.form-1 {
    float: left;
}
.form {
    float: left;
}

＆＃13;

<form id="form">
  <div class="form-1">
  
  <input id="input" placeholder="To-Do List"></input></div>
  <!--
-->
  <div class="form">
  
  <button id="+">+</button></div>
</form>
<div id="output"></div>

＆＃13;

Answer 2

更改按钮的高度

button {
    height: 50px;}

添加浮动并删除iput的margin-top

input {
/* margin-top: 20px; */
float: left;}

当字体大小太小时，<input />按钮会变亮

2 个答案: