html使2個雙行文本的行間距相同-有解無憂

我需要以這種方式格式化我的 html 布局： html使2個雙行文本的行間距相同

但是，我的實際結果是這樣的： html使2個雙行文本的行間距相同

我希望“服務名稱”（海盜服務）和“狀態”（建議）之間的距離等于“API名稱”（獲取所有戰利品）和“資源名稱”（海盜）之間的距離，但是服務狀態（海盜服務，建議）距離太大。

如何縮短“服務名稱”（海盜服務）和“狀態”（提議）之間的距離？

我的打字稿代碼：

import "./Description.css";

interface DescriptionProps {
  name: string;
  service: string;
  resource: string;
  status: string;
}
export const Description = ({name, service, resource, status,}: DescriptionProps) => {
  return (
    <div>
      <div className="name-service-container">
        <h1>
          <span className="names">{name}</span>
        </h1>
        <h4>
          <span className="services">{service}</span>
        </h4>
      </div>

      <br />

      <div className="resource-status-container">
        <p>
          <span className="resources">{resource}</span>
        </p>
        <p>
          <span className="status">{status}</span>
        </p>
      </div>
    </div>
);
};

我的CSS：

.resources {
  display: inline;
  float: left;
  font-style: italic;
  clear: left;
}

.names {
  display: inline;
  float: left;
}

.services {
  float: right;
  bottom: 0;
}

.status{
  float: right;
  top:0;
}

.resource-status-container{
  margin-right: 30px;

}

.name-service-container{
  margin-right:30px;
}

uj5u.com熱心網友回復：

你想要這樣的東西嗎？

h1,h4,p {
  margin:0;
}

.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background-color:gray;
}

.name-service-container,
.resource-status-container {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 0.5rem; /* Control distance between elements */
}

<div class="container">
  <div class="name-service-container">
    <h1><span class="names">{name}</span></h1>
    <h4><span class="services">{service}</span></h4>
  </div>
  <div class="resource-status-container">
    <span class="resources">{resource}</span>
    <span class="status">{status}</span>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525683.html

標籤：htmlcss反应

上一篇：CSS將影像保留在::before中以防止超出偽元素

下一篇：由于某種原因，網站中的按鈕不會像其他2個應該做類似事情的按鈕一樣乘以一個值