jquery - 并排添加两个元素，响应式

Question

我正在尝试制作一个网站，但我遇到了一个问题，我不知道如何解决它。我正在使用 this开源代码使我的输入看起来很漂亮。

我正在尝试对此做出一些改变，但行不通。我想在花式文本框的右侧添加一个文本。文本框具有最小宽度和最大宽度，因此在键入时文本框会展开。如果我使用 margin-left 进行定位，那么当文本框调整到更大时，文本框将覆盖文本。

第一个 CSS:

html{ height:100%; min-width:600px; height:100%; }
body{ height:100%; text-align:center; background:-webkit-radial-gradient(#205983, #0A2742); background:radial-gradient(#205983, #0A2742);}
#wrap{ min-width:600px; height:100%; position:relative; background:-webkit-radial-gradient(#205983, #0A2742); background:radial-gradient(#205983, #0A2742); overflow:hidden; }

@font-face {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  src: local('Fjalla One'), local('FjallaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/fjallaone/v1/rxxXUYj4oZ6Q5oDJFtEd6hsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

h1 {
  font-family: 'Fjalla One';
  font-style: normal;
  font-weight: 400;
  src: local('Fjalla One'), local('FjallaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/fjallaone/v1/rxxXUYj4oZ6Q5oDJFtEd6hsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
  position: relative;
  color:white;
  font-size: 53px;

}

*{ margin:0; padding:0; }

/* body::before{ content:''; display:inline-block; height:100%; vertical-align:middle; } */
header{ position:absolute; z-index:999; top:0; left:0; width:100%; padding:10px 0; text-align:center; }
    header menu{ display:inline-block; vertical-align:top; overflow:hidden; margin:0 12px; border-radius:6px; box-shadow:0 0 0 6px rgba(0,0,0,0.2); }
        header menu button{ font-family:'Fjalla One', sans-serif; margin:0; cursor:pointer; color:#333; padding:6px 12px; text-shadow:0 1px #DDD; font-size:.9em; float:left; border:0; border-left:1px solid rgba(0,0,0,0.2); box-shadow:0 -20px 20px -20px #777 inset; -webkit-transition:.1s; transition:.1s; }
        header menu button:hover{ background-color:#CCC; }
        header menu button:first-child{ border:0; }
        header menu button.active{ background-color:#BBB; color:#000; box-shadow:0 1px 3px #111 inset; padding:7px 12px 6px; }

        menu.radio{ background:#EEE; box-shadow:0 -20px 20px -20px #666 inset, 0 0 0 6px rgba(0,0,0,.2); position:relative; }
            menu.radio > div{ position:absolute; top:2px; bottom:2px; border-radius:5px; left:0; z-index:1; background:#103555; box-shadow:0 16px 0 0 rgba(255,255,255,0.1) inset; -webkit-transition:0.2s ease-out; transition:0.2s ease-out; }
            menu.radio label{ display:inline-block; position:relative; z-index:2; margin:0 2px; }
            menu.radio span{ opacity:.5; color:#222; font-family:'Fjalla One', sans-serif; cursor:pointer; padding:6px 12px; display:inline-block; -webkit-transition:0.2s ease-out; transition:0.2s ease-out; }
            menu.radio :checked ~ span{ opacity:1; color:#FFF; }
            menu.radio label:hover span{ opacity:1; }
            menu.radio input{ display:none; }

    a.git, a.by{ position:absolute; bottom:2px; right:5px; -webkit-transform:scale(0.8); -webkit-transform-origin:100% 100%; transform:scale(0.8); transform-origin:100% 100%; opacity:0.3; -webkit-transition:0.3s cubic-bezier(0.055, 0.6, 0.2, 1); transition:0.3s cubic-bezier(0.055, 0.6, 0.2, 1); }
    a.git:hover, a.by:hover{ -webkit-transform:scale(1); transform:scale(1); opacity:1; }
        a.git img{  }

    a.by{ text-transform:capitalize; right:auto; left:5px; font-size:20px; color:#FFF; text-decoration:none; font-family:'Fjalla One', sans-serif; -webkit-transform-origin:0% 100%; transform-origin:0% 100%; }
    .social{ position:absolute; top:-15px; left:5px; -webkit-filter:blur(20px); opacity:0; -webkit-transition:1s ease-out; transition:.6s ease-out; }
    .social.show{ top:5px; opacity:1; -webkit-filter:none; }
    .fbLike{ height:21px; width:100px; border:none; }
    .twitter-share-button{  }
    .social > *{ opacity:.5; -webkit-transition:.2s ease-out; transition:.2s ease-out;  }
    .social > *:hover{ opacity:1; }

#content{ position:absolute; width:200%; height:100%; -webkit-transition:.6s cubic-bezier(0.02, 0.6, 0.2, 1); transition:.6s cubic-bezier(0.02, 0.6, 0.2, 1); }
    #content section{ width:50%; height:100%; float:left; }
    #content section::before{ content:''; display:inline-block; height:100%; vertical-align:middle; }

.fancyInput{ max-width:20%; min-width:8%; font-size:40px; color:#FFF; vertical-align:middle; line-height:1.3; overflow:hidden; text-align:left; box-shadow:0 1px 0 rgba(255,255,255,.15), 0 2px 4px rgba(0,0,0,.2) inset, 0 0 12px rgba(255,255,255,.1); padding:8px 20px; background:rgba(0,0,0,.1); border-radius:10px; }

第二个 CSS:

@charset "IBM437";
@keyframes caret {
  50% {
    opacity: 0.1;
    transform: scaleY(0.8); } }

@-webkit-keyframes caret {
  50% {
    opacity: 0.1;
    -webkit-transform: scaleY(0.8); } }

.fancyInput {
  display: inline-block;
  letter-spacing: -1px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  width: auto;
  font-family: "Fjalla One", sans-serif;
  position: relative;
  /* only Caret which is  */
  /* lettes */
  /*.fancyInput > div span:last-of-type ~ br{ display:block; white-space:pre; }*/
  /*.fancyInput br:last-of-type + .caret{ position:static; display:inline-block; }*/
  /* text effects */ }
  .fancyInput ::-webkit-input-placeholder {
    color: transparent; }
  .fancyInput :-moz-placeholder {
    color: transparent; }
  .fancyInput ::-moz-placeholder {
    color: transparent; }
  .fancyInput :-ms-input-placeholder {
    color: transparent; }
  .fancyInput.textarea {
    white-space: normal;
    overflow: auto; }
  .fancyInput input, .fancyInput textarea {
    color: transparent;
    position: absolute;
    z-index: 2;
    width: 100%;
    border: 0;
    outline: 0;
    top: 0px;
    left: 0;
    background: none;
    padding: inherit;
    padding-bottom: 0;
    font-family: "Fjalla One", sans-serif;
    font-size: inherit;
    letter-spacing: -1px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; }
  .fancyInput input {
    top: 1px;
    left: -1px;
    padding-right: 0; }
  .fancyInput textarea {
    word-break: break-all;
    overflow: hidden;
    height: 100%; }
  .fancyInput > div {
    display: inline-block;
    position: relative; }
    .fancyInput > div:before {
      opacity: 0;
      left: -20px;
      content: attr(data-placeholder);
      position: absolute;
      transition: 0.3s ease-out; }
    .fancyInput > div.empty:before {
      opacity: 0.2;
      left: 0; }
  .fancyInput input:focus ~ div.empty:before {
    opacity: .1; }
  .fancyInput.textarea > div {
    width: 99.9%%; }
  .fancyInput *:focus ~ .caret,
  .fancyInput *:focus ~ div .caret {
    opacity: .8;
    box-shadow: 0 0 8px #FFF;
    -webkit-animation: 0.4s 40ms caret infinite;
    animation: 0.4s 40ms caret infinite; }
  .fancyInput .caret {
    font-weight: normal;
    opacity: 0;
    display: inline-block;
    width: 3px;
    margin-left: -3px;
    background: #FFF;
    border-radius: 4px;
    -moz-user-select: none; }
  .fancyInput span:not(.deleted) ~ .caret {
    position: absolute;
    margin: 0; }
  .fancyInput > div span {
    -webkit-transition: 100ms cubic-bezier(0, 0.6, 0.55, 1.4);
    transition: 100ms cubic-bezier(0, 0.6, 0.55, 1.4);
    display: inline-block;
    position: relative; }
  .fancyInput > input[type=password] + div span:empty::after {
    content: '●';
    display: inline; }
  .fancyInput > div .deleted {
    opacity: 0;
    -webkit-transition: 140ms;
    transition: 140ms;
    -webkit-transform: translateX(12px);
    transform: translateX(12px); }
  .fancyInput > div span.state1 {
    -webkit-transform: translateY(-25px) rotateX(90deg);
    transform: translateY(-25px) rotateX(90deg); }
  .fancyInput > div span.state2 {
    -webkit-transform: translateY(25px) rotateX(90deg);
    transform: translateY(25px) rotateX(90deg); }

/* DEMO text effects */
.effect2 .fancyInput > div span.state1, .effect2 .fancyInput > div span.state2 {
  -webkit-transform: translateX(10px) scale(1.8);
  transform: translateX(10px) scale(1.8); }

.effect3 .fancyInput > div span {
  -webkit-transition: 200ms cubic-bezier(0, 0.6, 0.55, 1.4);
  transition: 200ms cubic-bezier(0, 0.6, 0.55, 1.4); }
  .effect3 .fancyInput > div span.state1, .effect3 .fancyInput > div span.state2 {
    opacity: 0;
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    -webkit-filter: blur(2px); }

.effect4 .fancyInput > div span {
  -webkit-transition-duration: 150ms;
  transition-duration: 150ms; }
  .effect4 .fancyInput > div span.state1, .effect4 .fancyInput > div span.state2 {
    opacity: 0;
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px); }

.effect5 .fancyInput > div span {
  -webkit-transition-duration: 150ms;
  transition-duration: 150ms; }
  .effect5 .fancyInput > div span.state1, .effect5 .fancyInput > div span.state2 {
    opacity: 0;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
    opacity: 0; }

这是 JSFiddle代码。

我需要一种方法，将文本标题放在文本框的右侧，但作为响应，当文本框变大时，文本标题也会向右移动。

谢谢。

Answer 1

这就是您要找的东西吗？ http://jsfiddle.net/brsd11/rnwe0mps/

HTML

div id='wrap'>
    <div id='content'>
        <section class='input'>
            <div>
               <input id='inputID' type='text' placeholder='enter'/>
            </div>
            <label for='inputID' class='custom'>Test Header</label>
        </section>  
    </div>
</div>

CSS

label.custom{
  color:white;
  font-size:20px;
  display:inline;
  margin-left:10px;
}