html - CSS:无法垂直移动我的按钮

标签 html css button vertical-alignment

我得到了以下简单的 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 样式。它代表的元素(字典图标中的一个按钮)服从我给它的水平位置(“left: 13%”),但不是垂直位置(不管我输入的值如何它),如您所见:

谁能帮帮我?

PS:我希望按钮出现在栏内,除了那个词......

最佳答案

JSFiddle

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

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

关于html - CSS:无法垂直移动我的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27095211/

相关文章:

css - Flexbox 增长和收缩属性列与响应式网格系统的确定宽度列

html - 你可以用css定位<br/>吗?

javascript - 当没有按钮时,如何防止 fetch 请求重新加载 Javascript 页面?

javascript - 防止在菜单/导航系统的特定屏幕宽度下触发 jQuery 函数

java - 在 thymeleaf 中调用函数时将模型值作为字符串类型包含在内

javascript - 管理窗口尺寸

android - 将按钮添加到 Android 中的 onDraw 调用

html - 隐藏和显示按钮首先需要是 "show"

android - 当屏幕尺寸改变时改变元素

javascript - 在调整大小时检测 div 高度