БЛОГ НА HUSL


Что делать, если выделенный тэгом текст отображается не в строку с остальным текстом?

Автор вопроса: Censored Kaevik 

* {
    margin: 0;
    padding: 0;
    outline: none;
}
.Logo {
    width: 300px;
    display: flex;
    justify-content: space-around;
}
header{
    height: 150px;
    margin-top: 30px;
}
.container{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.header-logo{
    width: 300px;
    display: flex;
    justify-content: space-around;
}
.header-nav{
    font-family: 'Open Sans', sans-serif;
    margin-left: 70px;
    text-decoration: none;
    color: #545454;
    font-size: large;
    padding: 10px;
}
.line-second {
  border-top: 8px solid #a292b3;
  width: 100%;
  position: relative;
  top: 0px;
  margin-bottom: 0px;
  float: top;
}
.right {
  width: 34px;
  height: 65px;
  margin: 66px 179px 0 0;
  padding: 16px 9px 17px 3px;
  background-color: #82699d;
}
.left {
  width: 34px;
  height: 65px;
  margin: 66px 179px 0 0;
  padding: 16px 9px 17px 3px;
  background-color: #82699d;
}
.banner h2{
  width: 297px;
  height: 84px;
  margin: 20px 320px 27px 38px;
  opacity: 0.97;
  text-shadow: 0px 6px 0 rgba(130, 105, 157, 0.75);
  font-family: StRyde;
  font-size: 117px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.31;
  letter-spacing: normal;
  text-align: center;
  color: rgba(255, 255, 255, 0.97);
}
.banner p{
  width: 606px;
  height: 30px;
  margin: 21px 163px 0 179px;
  text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.45);
  font-family: SofiaPro;
  font-size: 31px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.16;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}
.banner {
  display: flex;
  justify-content: space-around;
}
.layer-24 {
  background-image: url(Layer 24.png);
  width: 1017px;
  height: 485px;
  margin: 0 142px 40px 141px;
  padding: 139px 1px 185px 0;
}
p {
  width: 905px;
  height: 94px;
  margin: auto;
  margin-top: 60px;
  display: flex;
  justify-content: space-around;
  font-family: SegoeUI;
  font-size: 23px;
  font-weight: normal;
  font-stretch: normal;
  font-style: italic;
  line-height: 1.57;
  letter-spacing: normal;
  text-align: center;
  color: #494848;
}
 p b {
  text-align: left;
  font-weight: bold;
  color: #82699d;
  font-size: 23px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minto</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">
</head>
<body>
    <div class="line-second"></div>
    <header>
        <div class="container">
            <div class="header-logo">
                <div class="logo">
                    <img src="logo.png" alt="image">
                </div>
            </div>
            <div class="header-nav">
                <a href="#" class="header-nav"> <img src="Home.png" alt=""> Home</a>
                <a href="#" class="header-nav"> <img src="AboutUs.png" alt=""> About Us</a>
                <a href="#" class="header-nav"> <img src="Services.png" alt=""> Services</a>
                <a href="#" class="header-nav"> <img src="ContactUs.png" alt=""> Contact Us</a>
            </div>

        </div>
    </header>
    <main>
            <div class="banner">
                <img src="banner.png" alt="">
            </div>
            <p><b>Lorem ipsum dolor sit amet</b>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </main>
</body>
</html>


Источник

Ответы (2 шт):

Автор решения: UModeL

Просто уберите у параграфа display: flex; и justify-content: space-around; :

* {
  margin: 0;
  padding: 0;
  outline: none;
}

.Logo {
  width: 300px;
  display: flex;
  justify-content: space-around;
}

header {
  height: 150px;
  margin-top: 30px;
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.header-logo {
  width: 300px;
  display: flex;
  justify-content: space-around;
}

.header-nav {
  font-family: 'Open Sans', sans-serif;
  margin-left: 70px;
  text-decoration: none;
  color: #545454;
  font-size: large;
  padding: 10px;
}

.line-second {
  border-top: 8px solid #a292b3;
  width: 100%;
  position: relative;
  top: 0px;
  margin-bottom: 0px;
  float: top;
}

.right {
  width: 34px;
  height: 65px;
  margin: 66px 179px 0 0;
  padding: 16px 9px 17px 3px;
  background-color: #82699d;
}

.left {
  width: 34px;
  height: 65px;
  margin: 66px 179px 0 0;
  padding: 16px 9px 17px 3px;
  background-color: #82699d;
}

.banner h2 {
  width: 297px;
  height: 84px;
  margin: 20px 320px 27px 38px;
  opacity: 0.97;
  text-shadow: 0px 6px 0 rgba(130, 105, 157, 0.75);
  font-family: StRyde;
  font-size: 117px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.31;
  letter-spacing: normal;
  text-align: center;
  color: rgba(255, 255, 255, 0.97);
}

.banner p {
  width: 606px;
  height: 30px;
  margin: 21px 163px 0 179px;
  text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.45);
  font-family: SofiaPro;
  font-size: 31px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.16;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}

.banner {
  display: flex;
  justify-content: space-around;
}

.layer-24 {
  background-image: url(Layer 24.png);
  width: 1017px;
  height: 485px;
  margin: 0 142px 40px 141px;
  padding: 139px 1px 185px 0;
}

p {
  width: 905px;
  height: 94px;
  margin: auto;
  margin-top: 60px;
  /*display: flex;
  justify-content: space-around;*/
  font-family: SegoeUI;
  font-size: 23px;
  font-weight: normal;
  font-stretch: normal;
  font-style: italic;
  line-height: 1.57;
  letter-spacing: normal;
  text-align: center;
  color: #494848;
}

p b {
  text-align: left;
  font-weight: bold;
  color: #82699d;
  font-size: 23px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minto</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">
</head>

<body>
  <div class="line-second"></div>
  <header>
    <div class="container">
      <div class="header-logo">
        <div class="logo">
          <img src="logo.png" alt="image">
        </div>
      </div>
      <div class="header-nav">
        <a href="#" class="header-nav"> <img src="Home.png" alt=""> Home</a>
        <a href="#" class="header-nav"> <img src="AboutUs.png" alt=""> About Us</a>
        <a href="#" class="header-nav"> <img src="Services.png" alt=""> Services</a>
        <a href="#" class="header-nav"> <img src="ContactUs.png" alt=""> Contact Us</a>
      </div>

    </div>
  </header>
  <main>
    <div class="banner">
      <img src="banner.png" alt="">
    </div>
    <p><b>Lorem ipsum dolor sit amet</b>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </main>
</body>

</html>

→ Ссылка
Автор решения: Павел Ериков

Я думаю будет лучше присвоить тэгу p и b определенные классы.

Например <p class='text'> и <b class='lorem'>.

Так же нужно убрать стили display: flex; и justify-content: space-around; у класса text.

Вот пример кода:

* {
    margin: 0;
    padding: 0;
    outline: none;
}
.Logo {
    width: 300px;
    display: flex;
    justify-content: space-around;
}
header{
    height: 150px;
    margin-top: 30px;
}
.container{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.header-logo{
    width: 300px;
    display: flex;
    justify-content: space-around;
}
.header-nav{
    font-family: 'Open Sans', sans-serif;
    margin-left: 70px;
    text-decoration: none;
    color: #545454;
    font-size: large;
    padding: 10px;
}
.line-second {
  border-top: 8px solid #a292b3;
  width: 100%;
  position: relative;
  top: 0px;
  margin-bottom: 0px;
  float: top;
}
.right {
  width: 34px;
  height: 65px;
  margin: 66px 179px 0 0;
  padding: 16px 9px 17px 3px;
  background-color: #82699d;
}
.left {
  width: 34px;
  height: 65px;
  margin: 66px 179px 0 0;
  padding: 16px 9px 17px 3px;
  background-color: #82699d;
}
.banner h2{
  width: 297px;
  height: 84px;
  margin: 20px 320px 27px 38px;
  opacity: 0.97;
  text-shadow: 0px 6px 0 rgba(130, 105, 157, 0.75);
  font-family: StRyde;
  font-size: 117px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.31;
  letter-spacing: normal;
  text-align: center;
  color: rgba(255, 255, 255, 0.97);
}
.banner p{
  width: 606px;
  height: 30px;
  margin: 21px 163px 0 179px;
  text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.45);
  font-family: SofiaPro;
  font-size: 31px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.16;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}
.banner {
  display: flex;
  justify-content: space-around;
}
.layer-24 {
  background-image: url(Layer 24.png);
  width: 1017px;
  height: 485px;
  margin: 0 142px 40px 141px;
  padding: 139px 1px 185px 0;
}
.text {
  width: 905px;
  height: 94px;
  margin: auto;
  margin-top: 60px;
  font-family: SegoeUI;
  font-size: 23px;
  font-weight: normal;
  font-stretch: normal;
  font-style: italic;
  line-height: 1.57;
  letter-spacing: normal;
  text-align: center;
  color: #494848;
}
 .lorem {
  font-weight: bold;
  color: #82699d;
  font-size: 23px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minto</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap" rel="stylesheet">
</head>
<body>
    <div class="line-second"></div>
    <header>
        <div class="container">
            <div class="header-logo">
                <div class="logo">
                    <img src="logo.png" alt="image">
                </div>
            </div>
            <div class="header-nav">
                <a href="#" class="header-nav"> <img src="Home.png" alt=""> Home</a>
                <a href="#" class="header-nav"> <img src="AboutUs.png" alt=""> About Us</a>
                <a href="#" class="header-nav"> <img src="Services.png" alt=""> Services</a>
                <a href="#" class="header-nav"> <img src="ContactUs.png" alt=""> Contact Us</a>
            </div>

        </div>
    </header>
    <main>
            <div class="banner">
                <img src="banner.png" alt="">
            </div>
            <p class='text'><b class='lorem'>Lorem ipsum dolor sit amet</b>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </main>
</body>
</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.