2

Как переместить 2-параграфа на строку где стоит 1-параграф?

#div_text1 {
  /* border: 1px solid green; */
  width: 200px;
  margin: 0 auto;
  padding: 0px;
  font-size: 70px;
  font-family: 'Times New Roman', cursive;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 50px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
  color: red;
}

div p {
  margin: 0;
}

#error:hover {
  text-shadow: 0 0 200px #ffffff, 0 0 80px #008000, 0 0 6px #0000ff;
}

#code:hover {
  text-shadow: 0 0 100px red, 0 0 40px FireBrick, 0 0 15px DarkRed;
}

#error {
  color: #fff;
  text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
}

#error span {
  animation: upper 11s linear infinite;
}

#code span:nth-of-type(2) {
  animation: lower 10s linear infinite;
}

#code span:nth-of-type(1) {
  text-shadow: none;
  opacity: .4;
}

@keyframes upper {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    opacity: .99;
    text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}

@keyframes lower {
  0%,
  12%,
  18.999%,
  23%,
  31.999%,
  37%,
  44.999%,
  46%,
  49.999%,
  51%,
  58.999%,
  61%,
  68.999%,
  71%,
  85.999%,
  96%,
  100% {
    opacity: 0.99;
    text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
  }
  19%,
  22.99%,
  32%,
  36.999%,
  45%,
  45.999%,
  50%,
  50.99%,
  59%,
  60.999%,
  69%,
  70.999%,
  86%,
  95.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}
<div id="div_text1">
  <p id="error">A<span>s</span>Is</p>
  <p id="code">N<span>U</span><span>R</span></p>
</div>

у параграфов разные украшение...нельзя совмешать в один параграф.

5
  • укращение чего? что?
    – kizoso
    6 фев 2019 в 8:07
  • почему бы вместо параграфов не использовать span?
    – Grundy
    6 фев 2019 в 8:12
  • тогда придется каждому span'у обратится отдельно либо придется создать классы
    – Student
    6 фев 2019 в 8:15
  • у тебя и так у каждого из параграфов стоит id если ты просто p на span поменяешь кроме расположения на одной строке ничего не поменяется
    – Grundy
    6 фев 2019 в 8:27
  • ясно, спасибо. попробую и так как вы сказали.
    – Student
    6 фев 2019 в 8:33

2 ответа 2

2

Либо сделайте оборачивающий див флексом без дополнительной возможности переноса:

#div_text1 {
  /* border: 1px solid green; */
  width: 200px;
  margin: 0 auto;
  padding: 0px;
  font-size: 70px;
  font-family: 'Times New Roman', cursive;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 50px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
  color: red;
  
  display: flex;
}

div p {
  margin: 0;
}

#error:hover {
  text-shadow: 0 0 200px #ffffff, 0 0 80px #008000, 0 0 6px #0000ff;
}

#code:hover {
  text-shadow: 0 0 100px red, 0 0 40px FireBrick, 0 0 15px DarkRed;
}

#error {
  color: #fff;
  text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
}

#error span {
  animation: upper 11s linear infinite;
}

#code span:nth-of-type(2) {
  animation: lower 10s linear infinite;
}

#code span:nth-of-type(1) {
  text-shadow: none;
  opacity: .4;
}

@keyframes upper {
  0%,
  19.999%,
  22%,
  62.999%,
  64%,
  64.999%,
  70%,
  100% {
    opacity: .99;
    text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
  }
  20%,
  21.999%,
  63%,
  63.999%,
  65%,
  69.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}

@keyframes lower {
  0%,
  12%,
  18.999%,
  23%,
  31.999%,
  37%,
  44.999%,
  46%,
  49.999%,
  51%,
  58.999%,
  61%,
  68.999%,
  71%,
  85.999%,
  96%,
  100% {
    opacity: 0.99;
    text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
  }
  19%,
  22.99%,
  32%,
  36.999%,
  45%,
  45.999%,
  50%,
  50.99%,
  59%,
  60.999%,
  69%,
  70.999%,
  86%,
  95.999% {
    opacity: 0.4;
    text-shadow: none;
  }
}
<div id="div_text1">
  <p id="error">A<span>s</span>Is</p>
  <p id="code">N<span>U</span><span>R</span></p>
</div>

1
  • Получилось. Спасибо вам.
    – Student
    6 фев 2019 в 8:37
1

Как вариант сделайте параграф инлайн-блоком:

p {
  display: inline-block;
}
<div id="div_text1">
  <p id="error">A<span>s</span>Is</p>
  <p id="code">N<span>U</span><span>R</span></p>
</div>

8
  • Извините, я совсем новичок...inline-block'ом сделал..дальше как переместить?
    – Student
    6 фев 2019 в 8:17
  • что переместить? куда переместить? из вашего примера не понятно что за укращения вы имеете ввиду
    – kizoso
    6 фев 2019 в 8:19
  • аааа!!!))) это видимо украШения!!))) да? ну тогда хотя б стили добавьте
    – kizoso
    6 фев 2019 в 8:20
  • не родной язык...сорри
    – Student
    6 фев 2019 в 8:20
  • 1
    сверху добавил стили
    – Student
    6 фев 2019 в 8:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.