javascript - 修复 CSS 格式

Question

代码笔:https://codepen.io/jitifor864/pen/GRvvpeK?editors=1100

我正在尝试找出我遇到的一些 CSS 错误。目前，我遇到的问题是:

1. 正在输入的文本未在搜索栏顶部居中
2. 如果单词太长，它下面的栏就会开始扩大。如果文本变长，我怎样才能保持该栏的大小不变而不扩展
3. 我似乎无法将闪光灯加宽一点并停在单词的末尾(看起来多了一个空白字符)

我能得到一些帮助吗？我确定这些都是“小”修复，只是无法弄清楚。谢谢!

// values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
    a = 0,
    isBackspacing = false;

// Typerwrite text content. Use a pipe to indicate the start of the second line "|".  
var textArray = [
  "AskReddit", "AskMen", "Gaming", "FemaleFashionAdvice", "Nosleep", "LetsNotMeet", "Technology", "Funny", "Memes", "Politics", "News"
];

// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
    speedWait = 1000, // Wait between typing and backspacing
    speedBackspace = 25; //Backspace Speed

//Run the loop
typeWriter("typewriter", textArray);

function typeWriter(id, ar) {
  var element = $("#" + id),
      aString = ar[a],
      eHeader = element.children("h1"); //Header element
  
  // Determine if animation should be typing or backspacing
  if (!isBackspacing) {
    
    // If full string hasn't yet been typed out, continue typing
    if (i < aString.length) {
        eHeader.text(eHeader.text() + aString.charAt(i));
        i++;
        setTimeout(function(){ typeWriter(id, ar); }, speedForward);
    }  
    // If full string has been typed, switch to backspace mode.
    else if (i == aString.length) {
      
      isBackspacing = true;
      setTimeout(function(){ typeWriter(id, ar); }, speedWait);
      
    }
    
  // If backspacing is enabled
  } else {
    
    // If either the header, continue backspacing
    if (eHeader.text().length > 0) {
      
      // If paragraph still has text, continue erasing, otherwise switch to the header.
      if (eHeader.text().length > 0) {
        eHeader.addClass("cursor");
        eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
      }
      setTimeout(function(){ typeWriter(id, ar); }, speedBackspace);
    
    // If the head has no text, switch to next quote in array and start typing.
    } else { 
      
      isBackspacing = false;
      i = 0;
      a = (a + 1) % ar.length; //Moves to next position in array, always looping back to 0
      setTimeout(function(){ typeWriter(id, ar); }, 50);
      
    }
  }
}

.parent {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
  
.search-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
}
  
.typewriter-wrapper {
      width: 100%;
      text-align: center;
}

.typewriter {
      display: inline-block;
      overflow: hidden;
      border-right: .15em solid orange; 
      white-space: nowrap;
      letter-spacing: .15em;
      animation:
          typing 2s steps(40, end),
          blink-caret .50s step-end infinite;
}
  
.search-form {
      display: flex;
      justify-content: center;
      width: 100%
}
  
.search-input {
      -webkit-appearance: none;
      background-clip: padding-box;
      background-color: white;
      vertical-align: middle;
      border-radius: 0.25rem;
      border: 1px solid #e0e0e5;
      font-size: 1rem;
      line-height: 2;
      padding: 0.375rem 1.25rem;
      -webkit-transition: border-color 0.2s;
      -moz-transition: border-color 0.2s;
      transition: border-color 0.2s;
      margin-bottom: 0;
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: auto;
      align-self: center;
      height: 51px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
}
   
.search-button {
      height: 51px;
      margin: 0;
      padding: 1rem 1.3rem;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
      font-size: 1rem;
      display: inline-block;
      font-weight: 600;
      font-size: 0.8rem;
      line-height: 1.15;
      letter-spacing: 0.1rem;
      background: #F95F5F;
      color: #292826;
      border: 1px solid transparent;
      vertical-align: middle;
      text-shadow: none;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      transition: all 0.2s;
}

.cursor::after {
  content:'';
  display:inline-block;
  margin-left:3px;
  background-color:white;
  animation-name:blink;
  animation-duration:0.5s;
  animation-iteration-count: infinite;
}
h1.cursor::after {
  height:24px;
  width:13px;
}

@keyframes blink-caret {
    from, to { 
        border-color: transparent 
    }
    50% { 
        border-color: orange; 
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
    <div class="search-container">
        <div class="typewriter-container">
            <div class="typewriter" id="typewriter">
              <h1 class="cursor"> </h1>
        </div>
        <form class="search-form" method="GET" action="{% url 'ssearch' %}">
            <input class="search-input" type="search" name="subreddit">
            <button class="search-button" type="submit"> Search </button>
            <!-- <i class="fa fa-search"></i> -->
        </form>
    </div>
</div>

Answer 1

1 - 要使文本居中，您应该将 .typewriter-container 显示为 flex，并以方向列和 align-items 为中心。

.typewriter-container {
    /* this are new CSS selector rules you'll need to add */
    display: flex;
    flex-direction: column;
    align-items: center;
}

2 - 浏览器有一个输入字段的默认宽度，它设置了表单的初始宽度。给表格一个固定的宽度，例如。 330 像素。

.search-form {
    /* Modify this existing rules to set the form width */
    display: flex;
    justify-content: center;
    width: 330px;
}

3 - 闪烁边框由 h1 中的 ::after 伪元素隔开。移除 ::after 的边距并将其宽度设置为 0(或您想要的任何间距)。

h1.cursor::after {
    /* Modify this existing rules to set the margin and width */
    height: 24px;
    width: 0;
    margin: 0;
}

可以在此处找到带有更改的 fork 代码笔 https://codepen.io/jla91ab37103f/pen/GRvvqWe