Question

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

这里我有两个名为＆＃39; Aug，＆＃39; ＆安培; ＆＃39; 2017＆＃39;在id #semiScreen的

元素中，它位于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;
   }

Answer 1

删除

  vertical-align: middle;

来自css中的#semiScreen

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>

Answer 2

我以这种方式解决了这个问题。我根据这个https://developers.giphy.com/docs/

将以未知方式放置的双箭头符号替换为这些箭头的代码

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: white;
}

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 {
  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;
}

<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>&#x226A;</button>
      <button>&lt;</button>
      <p id="semiScreen">
        <button>Aug,</button>
        <button>2017</button>
      </p>
      <button>&gt;</button>
      <button>&#x226B;</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>

我有一个div内的p元素都有相同的高度50px。为什么p向下移动？

2 个答案: