Question

我目前有一个文本输入，它自动居中在页面上，但我旁边有一个按钮，它根据屏幕的大小调整而过于分离或重叠..我目前有这个

<html>
    <head>
    <style>
    .book2Button{

      text-align: center;
      border: 1px solid #bdbdbd;
      margin-left:70%;
      margin-right: 30%;
      position: fixed;

    }

    input[type="text"] {
      margin-left:50%;
      margin-right:50%;
      border: 1px solid #bdbdbd;
      position: absolute;

    }
    </style>

    </head>
      <body>
        <div id = "a">
          <input type = "text" name = "zip"    placeholder = "ENTER ZIP"/>

          <a href = "book.html" class = "book2Button"> SUBMIT</a>
        </div>
      </body>
</html>

我的目标就像雅虎搜索栏一样，无论屏幕如何调整大小，都会有一个固定数量像素的按钮。我已经尝试了无数的事情，比如改变div的位置，边距..但我不能使用html和css工作。有没有专门引用文本输入并从那里创建带边距的按钮？

Answer 1

只需使用<script> function a(){ window.location = "http://www.localhost.com/"; } </script> <button onclick="a()">Go</button>将div内容居中，或使用text-align: center将div本身居中，然后将margin: 0 auto;添加到按钮。

示例：http://codepen.io/anon/pen/gPzwob

偏移按钮固定文本输入的像素数量

1 个答案: