Question

我希望3个文本框沿水平轴对齐LEFT，CENTER，RIGHT，并且在同一行上。

我可以使用margin-left和margin-right在中间设置一个文本框，然后使用position:absolute和left:0我可以获得一个文本框在左侧（与中间框在同一行）。

现在问题是最后一个方框，右方框。使用position:absolute和right:0，将框置于右侧，但下方显示一行。

我无法弄清楚我做错了什么，说实话，我不知道position:absolute和left:0如何使元素出现在同一行上中间元素。

＆＃13;

#sectionM,
#sectionL,
#sectionR {
  width: 250px;
  border: 1px outset black;
  padding: 5%;
  text-align: center;
}
#sectionM {
  margin-left: auto;
  margin-right: auto;
}
#sectionL {
  position: absolute;
  left: 0px;
}
#sectionR {
  position: absolute;
  right: 0px;
}
header {
  text-align: center;
}
nav {
  text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>Misha's Homepage</title>
  <link rel="stylesheet" type="text/css" href="mainstyle.css">
</head>

<header>
  <h1>Hi!</h1>
</header>

<nav><a href="archive/myFirstWebpage/mainPage.html">Archive</a>
</nav>

<article>
  <section id="sectionL">
    This is the left LEFT.
  </section>

  <section id="sectionM">
    This is the mid MID.
  </section>

  <section id="sectionR">
    This is the right RIGHT.
  </section>
</article>

</html>

＆＃13;

Answer 1

有很多方法可以做到这一点。以下是使用DefaultServeMux的解决方案，因为它具有响应性并且几乎适用于所有浏览器。

http://jsfiddle.net/kop21mbg/

＆＃13;

inline-block

＆＃13;

body {
    text-align: center;
}
nav {
    margin-bottom: 1.5em;
}
article {
    font-size: 0; /*fix white space*/
}
article > section {
    font-size: 16px;
    display: inline-block;
    width: 250px;
    border: 1px outset black;
    padding: 30px;
    box-sizing: border-box;
}

＆＃13;

如果您不希望它具有响应性，请添加以下样式。

<header>
     <h1>Hi!</h1>
</header>
<nav>
    <a href="#">Nav item</a>
</nav>
<article>
    <section>This is the left box.</section>
    <section>This is the mid box.</section>
    <section>This is the right box.</section>
</article>

如何在同一行上创建3个文本框并使中心对齐

1 个答案: