JSFiddle

Question

我得到了以下简单的HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
      <div id="bar">
          <span>
               Palavra       
          </span>
      <form>
          <input class="buttom" type="submit" value=""> 
      </form>
  </div>

  </body>
</html>

我的CSS代码是这样的：

#bar{
    width:100%;
    height:7%;
    background-color:#5959AB;
    color:white;
    font-family:"Arial";
    font-size:150%;
    font-weight: bold;
    line-height: 190%;
}

.buttom{
background: url(icone_dicionario.jpg) no-repeat;
cursor: pointer;
width: 40px;
height: 41px;
}

input{
    position:relative;
    bottom:1000%;
    left:13%;
}



html, body{
height:100%;
}

查看CSS上的input样式。它所代表的元素（字典图标中的一个按钮）是服从水平位置（＆＃34; left: 13%＆＃34;）我给它，但不是垂直（不重要的是我的价值）穿上它，你可以看到：

有人可以帮助我吗？

PS：我希望按钮显示在栏内，除了那个词......

Answer 1

你可能想让你的div位置相对而你的按钮位置是绝对的，然后设置顶部位置而不是底部。您也可以使用负数作为该位置。

Answer 2

为您的输入设置“position：relative;”。名称“relative”表示元素的位置与其自身相关。如果你想让它垂直，你可以选择以下之一：

使用top代替botoom并使用像素（px）代替百分比（％）
使用“position：absolute;”并使用较小的单位，否则元素将从屏幕的可见部分消失

如果您希望图标位于栏中，则必须指定栏类的位置。类似的东西：

 #bar
 {
   position:relative;
  /* rest of css */
 }

然后您可以使用绝对位置 图标。放入顶部：0px; 和右：0px; ，使其“粘贴”到酒吧的右上角

Answer 3

JSFiddle

只需将 top：-40px; 属性添加到输入样式即可。因为输入的宽度是固定的。

input{
    position:relative;
    bottom:1000%;
    left:13%;
    top:-40px;
}

Answer 4

为什么不使用'display：inline-block'？

例如

#bar span {display: inline-block}
form {display: inline-block}

请参阅此处的小提琴：http://jsfiddle.net/pavkr/483pm2x6/2/

CSS：无法垂直移动我的按钮

4 个答案:

JSFiddle