Question

我正在研究番茄钟，我想把时钟的控制放在时钟的右边而不是当前的位置。现在html / css代码将控件（添加时间/重启等）放在时钟的底部，我想把它放在右边。我怎样才能做到这一点？谢谢 HTML

<div class="container
  <!-- header title -->
  <div class="title primary-text">
      <h1>Pomodoro Clock</h1>      
  </div>
  <!-- clock / timer goes here -->
  <div class="clock">    
    <div class="timer">
      <h2>Session</h2>
      <h1>23:00</h1>     
    </div>    
  </div>
  <!-- this section for controlling clock -->
  <div class="controls">
    <div class="setTime">
       add time                 
    </div>
    <div class="setTime">
       add time                 
    </div>
    <div class="control">
      play/pause
    </div>
    <div class="control">
      reset
    </div>
  </div>
</div>

CSS

body {
  background-color: #545454;
}

.title {
  margin: auto;
  text-align: center;
  font-size: 32px;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.timer {
  margin: 0 0 0 0;
  font-size: 44px;
}

.clock {
  margin: auto;
  text-align: center;
  border: solid black 1px;
  width: 500px;
  height: 200px;
}

.controls {
  margin: auto;
  text-align: center;
  border: solid black 1px;
  width: 100px;
}

Answer 1

您可以inline-block和.clock使用.controls来对齐它们。但是，由于您希望.clock居中，因此您必须添加更多代码。我所做的是创建一个容器.clockContainer，然后在position: absolute上允许.controls。这将从流程中移除它，并将您的控件放在旁边，将.clock置于中心位置。然后我为你的时钟添加了一些余量，因此2个元素不会重叠。然后，您可以根据需要使用top值来操纵控件的高度位置：

＆＃13;

body {
  background-color: #545454;
}

.title {
  margin: auto;
  text-align: center;
  font-size: 32px;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.timer {
  margin: 0 0 0 0;
  font-size: 44px;
}

.clock {
  margin: 0 10px;
  text-align: center;
  border: solid black 1px;
  width: 500px;
  height: 200px;
  display: inline-block;
}

.controls {
  position: absolute;
  text-align: center;
  border: solid black 1px;
  width: 100px;
  display: inline-block;
}

.clockContainer {
  text-align: center;
  position: relative;
}

＆＃13;

<div class="container">
  <!-- header title -->
  <div class="title primary-text">
    <h1>Pomodoro Clock</h1>
  </div>
  <!-- clock / timer goes here -->
  <div class="clockContainer">
    <div class="clock">
      <div class="timer">
        <h2>Session</h2>
        <h1>23:00</h1>
      </div>
    </div>
    <!-- this section for controlling clock -->
    <div class="controls">
      <div class="setTime">
        add time
      </div>
      <div class="setTime">
        add time
      </div>
      <div class="control">
        play/pause
      </div>
      <div class="control">
        reset
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用margin:auto或float: left代替display: inline-block。检查下面更新的CSS ..

.clock {
  /*margin: auto;*/
  float: left;
  text-align: center;
  border: solid black 1px;
  width: 500px;
  height: 200px;
}

.controls {
  /*margin: auto;*/
  float: left;
  text-align: center;
  border: solid black 1px;
  width: 100px;
}

Answer 3

我认为你需要这个

要.clock居中，您可以使用display:inline-block;内的.clock和.controls text-align:center;内的.container

＆＃13;

body {
  background-color: #545454;

}

.container{
  text-align:center;	
	}

.title {
  margin: auto;
  text-align: center;
  font-size: 32px;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.timer {
  margin: 0 0 0 0;
  font-size: 44px;
}

.clock {
  margin: auto;
  text-align: center;
  border: solid black 1px;
  width: 400px;
  height: 200px;
  display:inline-block;
}

.controls {
  text-align: center;
  border: solid black 1px;
  width: 100px;
  display:inline-block;
}

＆＃13;

<div class="container">
  <!-- header title -->
  <div class="title primary-text">
      <h1>Pomodoro Clock</h1>      
  </div>
  <!-- clock / timer goes here -->
  <div class="clock">    
    <div class="timer">
      <h2>Session</h2>
      <h1>23:00</h1>     
    </div>    
  </div>
  <!-- this section for controlling clock -->
  <div class="controls">
    <div class="setTime">
       add time                 
    </div>
    <div class="setTime">
       add time                 
    </div>
    <div class="control">
      play/pause
    </div>
    <div class="control">
      reset
    </div>
  </div>
</div>

＆＃13;

如何将元素并排放置在html页面中

3 个答案: