html - 我在一个 div 中有 p 元素，它们的高度都为 50px。为什么p向下移动？

p 和 div 都没有边距或填充。如图

在这里，我在 id #semiScreen 的

元素中有两个名为“Aug”和“2017”的按钮，它位于带有其他按钮的 id #button-bar 元素内。而其他按钮就位。 p 内的按钮稍微向下移动(似乎整个 p 都向下移动)，如给定图片中的 Sep 按钮所示。为什么它们向下移动以及如何像其他按钮一样显示它们？

html:

    <body>
       <p id="demo"></p>
       <input type="text" id="dateInput" name="dateInput">
       <button>▼</button>
       <div id="calender" style="display: block;">
<div class="button-bar">
  <button>《</button>
  <button>&lt;</button>
  <p id="semiScreen">
    <button>Aug,</button>
    <button>2017</button>
  </p>
  <button>&gt;</button>
  <button>》</button>
</div>
<table id="calTable">
  <tr>
    <th>S</th>
    <th>M</th>
    <th>T</th>
    <th>W</th>
    <th>T</th>
    <th>F</th>
    <th>S</th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
  </tr>
  <tr>
    <td>20</td>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
  </tr>
  <tr>
    <td>27</td>
    <td>28</td>
    <td>29</td>
    <td>30</td>
    <td>31</td>
  </tr>
  </table>
  </div>
  </body>

CSS:

   * {
       margin: 0px;
       padding: 0px;
   }

   table, th, td {
     border: 1px solid #f2f2f2;
      font-size: 20px;
   }

   table {
     border-collapse: collapse;
   }

  tr:nth-child(even) {
     background-color: #f2f2f2;
  }

  td {
      padding: 4px 10px;
      text-align: center;
  }

  td:hover {
      color: white;
      background-color: #888;
  }

  body {
      font-family: Arial;
  }

  #calender {
      position: relative;
      z-index: 1;
      display: none;
  }

  #calender table {
      width: 287px;
  }

  div.button-bar {
      height: 50px;
      /*line-height: 100%;*/
       width: 287px;
  }

  #semiScreen {
      padding: 0px;
      display: inline-block;
      width: 127px;
      margin: 0px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      vertical-align: middle;
  }

  #calender div.button-bar button {
      background: white;
      height: 100%;
      border: none;
      margin: 0px;
      width: 35px;
      outline: none;
  }

  #calender div.button-bar button:hover {
    color: white;
    background-color: #888;
  }

   #calender div.button-bar #semiScreen button {
     width: auto;
   }

最佳答案

删除

  vertical-align: middle;

来自 #semiScreen 在 css 中

日历框在 css 中向下移动是由于用于呈现箭头的文本字符。

这对我来说适用于独立的 html 页面。

<div class="button-bar">
      <button>&#171;</button>
      <button>&lt;</button>
      <p id="semiScreen">
        <button>Aug,</button>
        <button>2017</button>
      </p>
      <button>&gt;</button>
      <button>&#187;</button>
    </div>

关于html - 我在一个 div 中有 p 元素，它们的高度都为 50px。为什么p向下移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46178527/

html - 我在一个 div 中有 p 元素，它们的高度都为 50px。为什么p向下移动？

上一篇：html - 如何使这些按钮内联？ HTML ActionLink 或 Html.BeginForm 问题

下一篇：html - 如果页面较短，则将 HTML 页脚保留在窗口底部