Question

这是代码：

[...]

<style>
  .hex {
    float: left;
    background-color: transparent;}

    .top, .bottom {
    width: 0;
    border-left: 2.2em solid transparent;
    border-right: 2.2em solid transparent;}

   .bottom{border-top: 1.25em solid #6C6;}

   .top{border-bottom: 1.25em solid #6C6;}


   .middle{
    width: 1.46em;
    height: 0.8em;
    background: #6C6;
    text-align: center;
    font-size: 3em;
    line-height: 1em;
    margin: 0 auto;
    border: 1px solid red;}

   .hex .middle input{
    color: black;
    text-align: center;
    background: transparent;
    border: 1px solid;
    width:5em;}

  </style>

[...]

<body>
  <div class="hex"> 
     <div class="top"></div>
     <div class="middle">
       <input type="text" class="playerName" id="name1" maxlength="7" value="what" disabled/>
     </div>
     <div class="bottom"></div> 
  </div>
</body>
</html>

完整示例 - http://jsbin.com/iqanoh/1

有人可以解释一下，为什么我不能控制div（红色）里面的文本框（黑色）的位置。它不会对任何：边距或填充更改做出反应。一般来说，我想中心（水平和垂直），但它总是在底部甚至一点点。

Answer 1

.middle div

中存在问题

.middle {
    background: none repeat scroll 0 0 #66CC66;
    border: 1px solid red;
    font-size: 3em;
    height: 0.8em;
    line-height: 1em;
    margin: 0 auto;
    text-align: center;
    width: 1.46em;
}

从中删除 font-size ， line-height 和 width 。希望这能解决你的问题。

Answer 2

您需要将display: block设置为input才能使margin生效。默认情况下，input有display: inline，它不会使用保证金。

div内的文本框不会对任何边距或填充更改做出反应

2 个答案: