个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
p 和 div 都没有边距或填充。如图
https://jsfiddle.net/4vqgj0qe/3/
在这里，我在 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><</button>
<p id="semiScreen">
<button>Aug,</button>
<button>2017</button>
</p>
<button>></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>«</button>
<button><</button>
<p id="semiScreen">
<button>Aug,</button>
<button>2017</button>
</p>
<button>></button>
<button>»</button>
</div>
关于html - 我在一个 div 中有 p 元素，它们的高度都为 50px。为什么p向下移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46178527/
25
4
0
#include int main() { double a,b; scanf("%lf%lf",&a,&b); printf("%lf %lf",a,b); retu
我有一个网格(6 行，5 列): grid = [ [None, None, None, None, None], [None, None, None, None, N
我的 CSV 文件由制表符分隔，我想过滤掉那些所有条目(16 列)为 0 值的行。我现在正在做这个 awk '$1 != 0 && $2 != 0 && ....omitted && $16 != 0
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
我的 Xcode 调试器报告，除了 all the IBOutlets 发现 nil(myLine 等)外，所有其他值包括 alive(bool 值)都已设置。顺便说一句，当我删除 App Deleg
posenet的初始化 const net = await posenet.load(); const pose = await net.estimateSinglePose(videoElement
所以下面的代码会发出两次错误警报: window.onload = function(){ alert(window.myframe.myarray insta
所以下面的代码会发出两次错误警报: window.onload = function(){ alert(window.myframe.myarray insta
我是一名优秀的程序员,十分优秀！