如何正确定位元素并布置页面?

时间:2015-11-30 23:16:35

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在使用freeCodeCamp,目前正在对网站进行逆向工程。然而,课程中没有涉及的一件事是定位元素,特别是以它们为中心。我无法让我的按钮看起来像示例项目。我不确定如何将标签置于按钮上方,然后在当前值的左侧和右侧添加加号和减号按钮。我可以看到示例中的代码,但我只是不明白什么是什么以及如何最终很好地集中所有内容。这是我的目标: http://codepen.io/GeoffStorbeck/pen/RPbGxZ/

这是我的代码: http://codepen.io/Dordan/pen/GpVvXm

HTML:

<div class="session">
    <div class="col-xs-3">
    </div>
    <div class="col-xs-6">
      <div class="break">
        <h6>BREAK LENGTH</h6>
        <button class="clock-button" id="minusBreakTime">
          -
        </button>
        <h2>0</h2>
        <button class="clock-button" id="addBreakTime">
          +
        </button>
      </div>
      <div class="session">
        <h6>SESSION LENGTH</h6>
        <button class="clock-button" id="minusSessionTime">
          -
        </button>
        <h2>0</h2>
        <button class="clock-button" id="addSessionTime">
          +
        </button>
      </div>
    </div>
    <div class="col-xs-3">
    </div>
  </div>

CSS:

.content {
  margin: auto;
  width: 75%;
  text-align: center;
}

.clock-button {
  border: none;
  background: none;
}

.section {
  display: inline-block;
  margin: auto;
}

.breakB {
}

.sessionB {
}

4 个答案:

答案 0 :(得分:0)

您在按钮之间使用<h2>标签。标题是块级元素,它引起了&#34; +&#34;和&#34; - &#34;按钮出现在自己的行上。将其更改为<span>,它将解决您的问题。 标签似乎已经成为我的中心。

答案 1 :(得分:0)

知道 class =“col-xs-12”表示容器的整个宽度,只需要两个带 class =“col-xs-6”的div

因此,您需要将HTML代码更改为:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lemon" />
  </head>
  
  <body>
    <div class="container-fluid content">
      <h2 class="title">Pomodoro Clock</h2>
      <div class="session">
        <div class="col-xs-6">
          <div class="break">
            <h6>BREAK LENGTH</h6>
            <button class="clock-button" id="minusBreakTime">
              -
            </button>
            <h2>0</h2>
            <button class="clock-button" id="addBreakTime">
              +
            </button>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="session">
            <h6>SESSION LENGTH</h6>
            <button class="clock-button" id="minusSessionTime">
              -
            </button>
            <h2>0</h2>
            <button class="clock-button" id="addSessionTime">
              +
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

答案 2 :(得分:0)

我的尝试:http://codepen.io/anon/pen/GpVwBK

您走在正确的轨道上,但如果您对特定HTML元素或CSS属性的工作原理感到好奇,我建议您在MDN上查找。他们的文档非常全面且易于阅读。

至于你想要达到的目标,看起来你很难将元素并排显示出来。有两种方法可以快速实现这一目标:display: inline-blockfloat: left。两者都非常相似,但是display: inline-block还有一个额外的好处,你可以使用vertical-align: middle来使元素垂直对齐,所以我将在这个例子中使用它:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lemon" />
  </head>

  <body>
    <div class="container-fluid content">
      <h2 class="title">Pomodoro Clock</h2>
      <div class="session">
        <div class="col-xs-3">
        </div>
        <div class="col-xs-6">
          <div class="break">
            <h6>BREAK LENGTH</h6>
            <div class="btns-container">
                <button class="clock-button" id="minusBreakTime">-</button>
                <h2>0</h2>
                <button class="clock-button" id="addBreakTime">+</button>
            </div>
          </div>
          <div class="session">
            <h6>SESSION LENGTH</h6>
            <div class="btns-container">
                <button class="clock-button" id="minusSessionTime">-</button>
                <h2>0</h2>
                <button class="clock-button" id="addSessionTime">+</button>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
        </div>
      </div>
    </div>
  </body>
</html>

我将按钮包装在新的div btns-container中,以便我可以在display: inline-block内创建所有内容:

.btns-container > * {
  display: inline-block;
  vertical-align: middle;
}

.session .session,
.session .break {
  display: inline-block;
}

我也做了会话并将容器并排放置。

希望这有帮助。

答案 3 :(得分:0)

尝试主div上的中心标记,例如:

<center>
<div> ... </div>
</center>

对于居中主要div中水平多个div,我喜欢:

<div style="float:left"> </div>

如果使用中心标记,文本应自动居中在div中,但您可以覆盖:

<p style="text-align:left"> ... </p>