Question

以下是我的HTML和CSS的摘要：jSFiddle

HTML：

<div id="leftWrapper">
    <div id="navigation">
        <a href="#">
            <div id="previousImage" class="navButton">&lt;</div>
        </a>

        <div id="findImage">
            <input type="text">
        </div>

        <a href="#">
            <div id="nextImage" class="navButton">&gt;</div>
        </a>
    </div>
</div>

CSS：

@import url("http://meyerweb.com/eric/tools/css/reset/reset.css");

#leftWrapper {
  float:left;
}

#leftWrapper {
  width:40%;
  background-color: red;
}

#navigation {
  padding-top: 0px;
  width: 300px;
  margin:0 auto;
  height: 40px;
  line-height: 80px;
  background-color: #bada55;
}

#navigation * {
  display: inline-block;
  text-align: center;
  font-size: 20px;
  font-weight: bolder;
}

#findImage {
  width: 212px;
}

.navButton {
  height: 40px;
  width:40px;
  line-height: 40px;
}

我的问题是：如何将#navigation（箭头和输入）与绿框对齐？它应该在它内部，但似乎总是在外面。

编辑：我希望在输入字段的一侧显示每个箭头，并且箭头和输入字段与绿色框垂直对齐。所以，像这样：

| ＆LT; inputhere＆gt; |

Answer 1

这应该做你正在寻找的东西。我们使用垂直对齐来垂直定位元素。输入标记设置为100％宽度为负边距，以覆盖大多数浏览器中应用的默认2px插入边框。

CSS：

@import url("http://meyerweb.com/eric/tools/css/reset/reset.css"); // This should probably be hosted locally

#leftWrapper {
    float:left;
}

#leftWrapper {
    width:40%;
    background-color: red;
}

#navigation {
    padding-top: 0px;
    width: 300px;
    margin:0 auto;
    height: 40px;
    line-height: 40px;
    background-color: #bada55;
}

#navigation * {
    display: inline-block;
    text-align: center;
    font-size: 20px;
    font-weight: bolder;
    vertical-align: top;
}

#findImage {
    width: 212px;
}

#findImage input {
    width:100%;
    height:28px;
    padding: 0;
    vertical-align: middle;
    border: 2px inset;
    margin-left:-2px;
}

.navButton {
    height: 40px;
    width:40px;
    line-height: 40px;
}

http://jsfiddle.net/7d53Lea6/

Answer 2

我已尽力简化标记和样式：

form {
    width: 300px;
    height: 28px;
    margin:0 auto;
    padding: 6px 0 6px 24px;
    background-color: #bada55;
}

form a {
    text-decoration:none;
}

input {
    height: 20px;
    line-height:20px;
}

form a, input {
    display:inline-block;
    font-size: 20px;
    font-weight:900;
}

<form>
    <a href="#" id="previousImage" class="navButton">&lt;</a>
        <input type="text" id="findImage" class="findImage" name="findImage" />
    <a href="#" id="nextImage" class="navButton">&gt;</a>
</form>

Answer 3

我不是故意粗鲁，但我认为你应该正确地学习HTML和CSS。无论你做什么，都不要把别人的工作带走。因为你最终会比以前更加困惑。

我知道有些人无法阅读标记，这就是为什么我建议你不要使用，并使用你不理解的东西。

你的css缺少更多的CSS，你的HTML缺少更多的HTML。您甚至没有使用<body>代码，而应该使用<body>代码。

我在HTML中看不到导航。没有任何内容与您展示的HTML相关联。

您的HTML：

<div id="navigation">
    <a href="#">
        <div id="previousImage" class="navButton">&lt;</div>
    </a>

    <div id="findImage">
        <input type="text">
    </div>

    <a href="#">
        <div id="nextImage" class="navButton">&gt;</div>
    </a>
</div>

我的HTML：

<div id="menu">
<a href="index.html">Home</a>
<a href="friends.html">friends</a>
<a href="foods.html">foods</a>
<a href="schools.html">schools</a>
<a href="candy.html">candy</a>
<a href="family.html">family</a>
</div>

如果仔细查看导航div之间的内容，那么您应该会看到与标记相关联的内容，但我没有看到任何与您的HTML链接的内容。

你也展示了用于创建一个空文本字段来制作表单的HTML的一部分，但是我觉得这个HTML对你来说是没用的，因为你缺少很多标记，而且代码要做一个表单

您的HTML：

<input type="text">

在CSS中对齐

编辑：我希望在输入字段的一侧显示每个箭头，并且箭头和输入字段与绿色框垂直对齐。所以，像这样：

| ＆LT; inputhere＆gt; |

3 个答案: