使html中不同的单词垂直对齐

问题描述 投票：0回答：1

我试图在 HTML 页面中获取以下内容，其中红色椭圆内的单词开头垂直对齐：

但我得到以下信息：

这是给我之前输出的代码：

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>Aligned Arabic Text</title>
    <style>
        /* Container styling */
        .container {
            width: 400px; /* Set a specific width */
            direction: rtl; /* Use right-to-left text direction */
        }

        /* Each line styling */
        .line {
            display: flex; /* Use flexbox for layout */
            justify-content: flex-start; /* Align content to the left in RTL */
        }

        /* Label styling */
        .label {
            margin-left: 10px; /* Add margin on the left */
        }

        /* Colon styling */
        .colon {
            width: 20px; /* Fixed width to align colons */
            text-align: left; /* Align colon to the left */
            margin-right: 10px; /* Add margin to the right of the colon */
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- First line -->
        <div class="line">
            <span class="label">التوقيع</span> <!-- Signature -->
            <span class="colon">:</span>
            <span>أحمد العلى</span> <!-- Name of the person who made the signature -->
        </div>
        <!-- Second line -->
        <div class="line">
            <span class="label">الاسم</span> <!-- Name -->
            <span class="colon">:</span>
            <span>أحمد العلي</span> <!-- Name of the person who made the signature -->
        </div>
        <!-- Third line -->
        <div class="line">
            <span class="label">المنصب</span> <!-- Position -->
            <span class="colon">:</span>
            <span>مدير</span> <!-- Position of the person who made the signature -->
        </div>
    </div>
</body>
</html>

html vertical-alignment arabic
1个回答
0
投票

嗯，我不知道我是否很好地理解了你的问题，但是，根据你的理解，你想要做类似的事情：总是在名字后面加上“：”，最好的选择是使用javascript 数组并激活其属性，因为这样您就获得了活力。这是一篇关于：Javascript - 在 HTML 中动态使用数组值

的文章

还有一个例子：

const activities = [{ "activityOwner": "Raymond Carlson", "activityDesc": "Complete all the steps from Getting Started wizard"}, {"activityOwner": "Flopsy McDoogal","activityDesc": "Called interested in March fundraising Sponsorship" }, { "activityOwner": "Gary Busy", "activityDesc": "Get approval for price quote" }]

const html = activities.map(obj => {
  let item = document.querySelector('#template').innerHTML;
  item = item.replace('{owner}', obj.activityOwner);
  item = item.replace('{desc}', obj.activityDesc);
  return item;
});
document.querySelector('#list').innerHTML = html.join('');
<div id="list"></div>

<template id="template">
  <div class="container">
    <div class="row"></div>
    <div class="qa-message-list">
      <div class="message-item">
        <div class="message-inner">
          <div class="message-head clearfix">
            <div class="user-detail">
              <h5 class="handle">
                <p class="activityowner">{owner}</p>
              </h5>
              <div class="post-meta"></div>
            </div>
          </div>
          <div class="qa-message-content">
            <p class="activitydesc">{desc}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.