html - 将文本设置在同一行

Question

我有这个 HTML:

<div id="container">
   <div id="content">
      <h2 class="frame1">Loriam Ipisum</h2>
      <h2 class="frame2">Loriam Ipisumsad</h2>
   </div>
</div>

还有这个 CSS:

body{margin: 0; padding: 0;}

#container{
        width: 100%;        
    top: 200px;
    border: 1px solid black;
    text-align: center;     
    position: relative;
    overflow: hidden;
    }

#content{
    width: 300px;
    height: 50px;
    border: 1px solid blue;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    }

#content h2{
    position: relative;
    display: inline-block;
    }

#content h2.frame1{
    -webkit-animation-delay: 0s;
    -webkit-animation-name: efeito1;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;      
    -webkit-animation-direction: alternate;
}

#content h2.frame2{
    -webkit-animation-delay: 3s;
    -webkit-animation-name: efeito1;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;      
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes efeito1{

   0%{
    left: 0;
    opacity: 0;         
}
   50%{         
    opacity: 0.4;
    left: 100px;
    opacity: 0.4;
    left: 200;
}
   100%{                        
    opacity: 0;         
    left: 300px;
    opacity: 0.4;
    }
}

我想做的是:我希望两个 .frames 在同一条线上。所以当我应用动画时，它会在同一个地方发生，效果很好。我希望它们在同一行，在同一位置，但没有一个文本在另一个看起来像一团糟......
我尝试使用 overflow: Hidden: 但没有用，文本保持一个在另一个之上...

我要申请，这个效果:http://codepen.io/anon/pen/LcwKj/

有什么建议吗？谢谢!

Answer 1

这个效果是你想要的吗:

HTML

<div id="container">
   <div id="content">
      <h2 class="frame1">Loriam Ipisum</h2>
      <h2 class="frame2">sad</h2>
   </div>
</div>

CSS

body{margin: 0; padding: 0;}

#container{
        width: 100%;        
    top: 200px;
    border: 1px solid black;
    text-align: center;     
    position: relative;
    overflow: hidden;
    }

#content{
    width: 100%;
    height: 50px;
    border: 1px solid blue;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    }

#content h2{
    position: absolute;
    display: inline-block;
    }

#content h2.frame1{
    -webkit-animation-delay: 0s;
    -webkit-animation-name: efeito1;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;      
    -webkit-animation-direction: alternate;
    opacity:0;
}

#content h2.frame2{
    -webkit-animation-delay: 3s;
    -webkit-animation-name: efeito1;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;      
    -webkit-animation-direction: alternate;
    opacity:0;
    position:absolute;
}

@-webkit-keyframes efeito1{

   0%{
    opacity: 0;
    }
   100%{                        
    opacity: 100;
    }
}