HTML CSS秒表

我试图将标题样式和对齐 我把秒表和登录链接放在右边， ii左侧的徽标以及指向主页和主页的链接 iii带有标志和形式的内容将位于身体部位的中心。 试图浮动和调整，但它只是一团糟，找不到什么我正在做的错误新蜜蜂在这里，任何帮助将不胜感激谢谢

**更新：一直在尝试调试，看起来

标题的html代码会弄乱标题和标题的布局

在刷新时，它看起来好像有东西与样式重叠

标题格式看起来与某些样式重叠

但无法找到确切的错误，我们非常感谢您的帮助。多谢各位**

标题的HTML代码

正文部分，主页

---

当你解释你想做什么时，你完全失去了我在顶部的位置。@user3334690我正在尝试设置标题的样式并对齐标题，将VMware徽标和Home置于左侧顶部，stopwatch和Login置于右侧，主体将位于中间主体。我添加了上一页的屏幕截图，这可能会让我更清楚，想在标题右上角添加秒表。你最好在问题中稍微澄清一下。。。当前的意识流有点难以理解。另外，在我看来，您提供的代码来自erb，但问题只针对css和html进行了标记。我同意这个问题实际上只是关于css，用html表示结构。您应该考虑在您的问题中显示生成的HTML而不是Erb。您还可以考虑使用jsFoDLE，或者使用代码片段，然后可以删除图片。这将清理您的问题，以便人们阅读。@user3731311您可能会收到一些反对票，因为您的问题不太清楚，并且您发布了大量代码而不是一篇文章。请仔细阅读这篇文章以及帮助中心的其他内容，以帮助您改进您的文章。

<header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
      <%= link_to image_tag("images.jpeg", alt: "Logo"),
                id: "logo" %>
        <nav>
          <ul class="nav navbar-nav pull-left">
            <li><%= link_to "Home",    root_path %></li>
          
          <ul class="nav navbar-nav pull-right">
            <li><%= link_to "Log in", users_path %></li>
          </ul>
    
          <ul class="nav navbar-nav pull-right">
            <li> <!-- Lets make a simple stopwatch using CSS3 -->
                <!-- Time for the markup -->
                <!-- The core logic is a simple div containing numbers being moved
                using keyframe animations. The numbers have space between them so that they
                can be aligned vertically easily by reducing the container width. Lets
                wrap up the 'numbers' in a cell to display only 1 digit-->
    
                <!-- We will replicate the digits now -->
                <div class="container">
                  <!-- time to add the controls -->
                  <input id="start" name="controls" type="radio" />
                  <input id="stop" name="controls" type="radio" />
                  <input id="reset" name="controls" type="radio" />
                  <div class="timer">
                    <div class="cell">
                      <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
                    </div>
                    <div class="cell">
                      <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
                    </div>
                    <div class="cell divider"><div class="numbers">:</div></div>
                    <div class="cell">
                      <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
                    </div>
                    <div class="cell">
                      <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
                    </div>
                    <div class="cell divider"><div class="numbers">:</div></div>
                    <div class="cell">
                      <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
                    </div>
                    <div class="cell">
                      <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
                    </div>
                    <div class="cell divider"><div class="numbers">:</div></div>
                    <div class="cell">
                      <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
                    </div>
                    <div class="cell">
                      <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
                    </div>
                    <div class="cell">
                      <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
                    </div>
                    </div>
                    <!-- Lables for the controls -->
                    <div id="timer_controls">
                      <label for="start">Start</label>
                      <label for="stop">Stop</label>
                      <label for="reset">Reset</label>
                    </div>
                  </div>
    
                  <!-- Lets load up prefixfree first -->
                  <script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
                      </nav>
                  </header> 
                  </li>'

/* mixins, variables, etc. */

$gray-medium-light: #eaeaea;

@mixin box_sizing {
  -moz-boz-sizing:      border-box;
  -webkit-box-sizing:   border-box;
  box-sizing:           border-box;
}

/* universal */

html {
  overflow-y: scroll;
}

body {
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #167EA8), color-stop(1, #0E0754) );
  background:-moz-linear-gradient( center top, #167EA8 5%, #0E0754 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#167EA8', endColorstr='#0E0754');
  background-color:#167EA8; 
  color:#FFFBFA; 
  font-size: 12px; 
  font-weight: bold;
}

section {
  overflow: auto;
}

textarea {
  resize: vertical;
}

.center {
  text-align: center;
  h1 {
    margin-bottom: 10px;
  }
}

/* header */

#logo small{
  float: left;
  margin-right: 2px;
  font-size: 1.0em;
  color: white;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding-top: 15px;
  font-weight: bold;
  &:hover {
    color: white;
    text-decoration: none;
  }
}

* {margin: 0; padding: 0;}


.container {
  padding: 100px;
  text-align: center;
}

.timer {
  padding: 10px;
  background: linear-gradient(top, #222, #444);
  overflow: hidden;
  display: inline-block;
  border: 7px solid #efefef;
  border-radius: 5px;
  position: relative;
  
  box-shadow: 
    inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 
    0 5px 20px -10px rgba(0, 0, 0, 1);
}

.cell {
  /*Should only display 1 digit. Hence height = line height of .numbers
  and width = width of .numbers*/
  width: 0.60em;
  height: 40px;
  font-size: 50px;
  overflow: hidden;
  position: relative;
  float: left;
}

.numbers {
  width: 0.6em;
  line-height: 40px;
  font-family: digital, arial, verdana;
  text-align: center;
  color: #fff;
  
  position: absolute;
  top: 0;
  left: 0;
  
  /*Glow to the text*/
  text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}

/*Styles for the controls*/
#timer_controls {
  margin-top: -5px;
}
#timer_controls label {
  cursor: pointer;
  padding: 5px 10px;
  background: #efefef;
  font-family: arial, verdana, tahoma;
  font-size: 11px;
  border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}

/*Control code*/
#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}

.moveten {
  /*The digits move but dont look good. We will use steps now
  10 digits = 10 steps. You can now see the digits swapping instead of 
  moving pixel-by-pixel*/
  animation: moveten 1s steps(10, end) infinite;
  /*By default animation should be paused*/
  animation-play-state: paused;
}
.movesix {
  animation: movesix 1s steps(6, end) infinite;
  animation-play-state: paused;
}

/*Now we need to sync the animation speed with time speed*/
/*One second per digit. 10 digits. Hence 10s*/
.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;} /*60 times .second*/

.milisecond {animation-duration: 1s;} /*1/10th of .second*/
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}

.minute {animation-duration: 600s;} /*60 times .second*/
.tenminute {animation-duration: 3600s;} /*60 times .minute*/

.hour {animation-duration: 36000s;} /*60 times .minute*/
.tenhour {animation-duration: 360000s;} /*10 times .hour*/

/*The stopwatch looks good now. Lets add some styles*/

/*Lets animate the digit now - the main part of this tutorial*/
/*We are using prefixfree, so no need of vendor prefixes*/
/*The logic of the animation is to alter the 'top' value of the absolutely
positioned .numbers*/
/*Minutes and Seconds should be limited to only '60' and not '100'
Hence we need to create 2 animations. One with 10 steps and 10 digits and
the other one with 6 steps and 6 digits*/
@keyframes moveten {
  0% {top: 0;}
  100% {top: -400px;} 
  /*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@keyframes movesix {
  0% {top: 0;}
  100% {top: -240px;} 
  /*height = 40. digits = 6. hence -240 to move it completely to the top*/
}


/*Lets use a better font for the numbers*/
@font-face {
  font-family: 'digital';
  src: url('http://thecodeplayer.com/uploads/fonts/DS-DIGI.TTF');
  }

<% provide(:title, "Home") %>
<div class="center jumbotron">
  <h1><%= link_to image_tag("logoo.jpg", alt: "Logo") %></h1>
  <h2>
    Interviewer Name <%= text_field_tag('input_second', 'First Middle Last Name', class: 'input-large') %>
  </h2>
  <h2>
    Interviewee Name <%= text_field_tag('input_second', 'First Middle last Name', class: 'input-large') %>
  </h2>
  <h2>
    Date <%= text_field_tag('input_second', 'mm/dd/yyyy', class: 'input-large') %>
  </h2>
  <%= link_to "Begin Interview Now", about_path, class: "btn btn-lg btn-primary" %>
 </div>