欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

元素沒有上移

CSS
錢衛國2年前7瀏覽0評論

1

2

我在圖片旁邊放了一段文字。我想向上移動文本，但是做不到。填充底部對它不起作用。嘗試了一切，但仍然面臨這個問題。

代碼:

section {
  margin-top: 0px;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  height: auto;
}

section ul li {
  display: inline-block;
}

.left-section {
  float: left;
  width: 40%;
}

.right-section {
  float: right;
  width: 58%;
  margin-top: -70px;
  text-align: right;
  height: auto;
}

.pp {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  color: #3b6cff;
  font-size: 38px;
  padding: 15px;
  margin-bottom: 11px;
}

figure {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  font-size: 12px;
  text-align: center;
  margin-right: 10px;
  background: #fff;
  line-height: 1.7em;
  border: 1px solid #ccc;
}

figure img {
  display: inline-block;
  width: 22px;
  height: auto;
  margin-bottom: -22px;
}

.sp1 {
  /* margin-left: 323px;*/
  padding-right: 100%;
}

.pp1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding-right: 80%;
}

<section>
  <ul class="left-section">
    <li><img class="prog" src="images/programming.png" alt=""></li>
    <li class="pp">DGcom</li>
  </ul>

  <ul class="right-section">
    <li class="sp1">
      <figure>
        <img src="images/clk.png" alt="">
      </figure>
    </li>
    <li class="pp1">Opening Hour</li>
  </ul>
</section>

你可以簡單的使用網格來對齊你想要的東西

看起來像這樣:

h4 {
  padding: 0;
  margin: 0;
}

section {
  margin-top: 0px;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  background-color: #ffffff;
  height: auto;
}
section ul li {
  display: inline-block;
}
.left-section {
  width: 40%;
}
.right-section {
  width: fit-content;
  height: min-content;
}
.open {
  display: grid;
  flex-wrap: wrap;
}
.pp {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  color: #3b6cff;
  font-size: 38px;
  padding: 15px;
  margin-bottom: 11px;
}
.icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 12px;
  background: #fff;
  line-height: 1.7em;
  border: 1px solid #ccc;
  margin-right: 10px;
  grid-column: 1;
  grid-row: 1/3;
  display: flex;
  justify-content: center;
  align-items: center;
}
div img {
  width: 22px;
  height: auto;
}

.pp1 {
  color: #787878;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  height: fit-content;
  grid-column: 2;
}
.pp2 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  height: fit-content;
  grid-column: 2;
  font-weight: bolder;
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <section>
      <ul class="left-section">
        <li><img class="prog" src="images/programming.png" alt="" /></li>
        <li class="pp">DGcom</li>
      </ul>

      <ul class="right-section">
        <li class="open">
          <div class="icon">
            <img src="images/clk.png" alt="" />
          </div>
          <h4 class="pp1">Opening Hour</h4>
          <h4 class="pp2">Mon-Fri,8:00-9:00</h4>
        </li>
      </ul>
    </section>
  </body>
</html>

我個人建議改變你的HTML。你使用了兩個獨立的列表項來創建圖標文本元素，這實際上是沒有意義的?；谠O計，圖標僅僅是文本告訴用戶的視覺指示器。因此，它們應該是同一元素的一部分，即單個<。李& gt包含圖標和文本的。因此，您的html應該看起來更像這樣:

<ul class="right-section">
    <li class="sp1">
        <img class="prog" src="images/programming.png" alt="">
        <span class="pp1">Opening Hour</span>
    </li>
</ul>

為了讓圖標和文本如你所愿地排列起來，display: flex是我和許多其他人建議的解決方案。基于我上面提供的HTML，實現這一點的CSS如下所示:

.prog {
    display: block;
}

.right-section {     
    list-style: none;
}

.sp1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

將圖像設置為display: block將使處理起來更容易，也更容易預測。作為題外話，我個人建議設置所有& ltimg & gts顯示:在您的復位塊。

設置您的& lt李& gt要顯示:flex會自動將圖標和文本并排放置。設置align-items: center后，圖標和文本將按照您的要求對齊。我使用了gap來創建圖標和文本之間的空間，但是使用margin也可以。

您必須為您的解決方案更改HTML。請檢查我的答案。

section {
        margin-top: 0px;
        width: 100%;
        overflow: hidden;
        background-color: #ffffff;
        height: auto;
    }

    section ul li {
        display: inline-block;
    }

    .left-section {
        float: left;
        width: 40%;
    }

    .right-section {
        float: right;
        height: auto;
        display: flex;
        align-items: center;
    }

    .pp {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 700;
        color: #3b6cff;
        font-size: 38px;
        padding: 15px;
        margin-bottom: 11px;
    }

    figure {
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        font-size: 12px;
        text-align: center;
        margin-right: 10px;
        background: #fff;
        line-height: 1.7em;
        border: 1px solid #ccc;
    }

    figure img {
        display: inline-block;
        width: 22px;
        height: auto;
        margin-bottom: -22px;
    }

    .pp1 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       
    }

    .pp1 span {
        display: block;
    }

    / new /
    .ab {
        display: flex;
        align-items: center;
        width: inherit;
    }

<section>
        <div class="ab">
        <ul class="left-section">
            <li><img class="prog" src="images/programming.png" alt=""></li>
            <li class="pp">DGcom</li>
        </ul>

        <ul class="right-section">
            <li class="sp1">
                <figure>
                    <img src="images/clk.png" alt="">
                </figure>
            </li>
            <li class="pp1"><span>Opening Hour</span><span><b>Mon-Fri, 8:00-9:00</b></span></li>
        </ul>
    </div>
    </section>

根據您提供的代碼，您試圖上移的文本似乎是& quotDGcom & quot編程圖像旁邊的文本。要將此文本上移，您可以嘗試調整& quot。pp & quot類在您的CSS代碼中。這里有一個例子:

.pp {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
  color: #3b6cff;
  font-size: 38px;
  padding: 0 15px; /* adjust the padding values */
  margin: 0; /* reset the margin to 0 */
}

在上面的例子中，我刪除了margin-bottom屬性，并將上下填充設置為0，同時保持左右填充為15px。這應該會移動& quotDGcom & quot文本向上靠近編程圖像。

如果這不起作用，您可能需要調整& quotul & quot和& quot李說:圖像和文本周圍的元素。您也可以嘗試調整& quot行高& quot的屬性pp & quot類來減少文本行之間的間距。

希望這有幫助！如果你還有什么問題，請告訴我。