HTML 脚本文本对齐/边框

编程问答 2022-05-18

问题描述

我必须编写此 HTML 的脚本。如您所见，我进行了编码，但布局不同。有人可以帮我吗？

问题：

enter image description here

这是我的输出：

enter image description here

代码：

<! DOCTYPE Html>
<html>
<head><title>example2</title></head>
   <body>
   <h3 style="border-style: solid; width: 5%; text-align: top-center; float: center;"> YUCW</h3>
 
      <p style="text-align:left; border-bottom-style: solid;">
    MIS 343
    <span style="float:right;">
       principles of e-commerce
         <p style="text-align:left; border-bottom-style: solid;">
    Name: <i>Riyam</i>
    <span style="float:right;">
       midterm marks 24/25
        
    </span>
</p>

<p style="text-align:left;">
    Specialization : <i > MIS</i>
    <span style="float:right;">
      final marks 32/35
        
    </span>
</p>
   </body>
</html>

解决方法

有很多方法可以做到这一点

<body> 
        <p style="text-align: center;width: 40vw;float: left;margin-left: auto;">
             <span style="display: block;border-bottom-style: solid;">MIS 343</span><br>
             <span style="border-bottom-style: solid;display: block;">Name : Riyam</span><br>
             <span>Specialization : MIS</span>
        </p>
        
        <h3 style="margin: 0;width: 5%;display: flex;justify-content: center;height: 100px;border-style: solid;padding: 0;float: left;align-items: center;"> YUCW</h3>
        
        <p style="text-align: center;width: 40vw;float: left;display: inline;">
             <span style="display: block;border-bottom-style: solid;">principles of e-commerce</span><br>
             <span style="display: block;border-bottom-style: solid;">midterm marks 24/25</span><br>
             <span>final marks 32/35</span>
        </p>     
</body>
, 
<body>
<div style="display:flex;justify-content:center;">
 <div style="text-align: center;flex-grow: 1;">
    <p style="border-bottom-style: solid;">
    MIS 343
    </p>
    <p style="border-bottom-style: solid;">
    Name : Riyam
    </p>
    <p>
    Specialization : MIS
    </p>
 </div>
    <h3 style="border-style: solid;width: 5%;display: flex;align-items:center;justify-content: center;"> YUCW</h3>
 <div style="text-align: center;flex-grow: 1;">
    <p style="border-bottom-style: solid;">
    principles of e-commerce
    </p>
    <p style="border-bottom-style: solid;">
    midterm marks 24/25
    </p>
    <p>
    final marks 32/35
    </p>
  </div>
</div>    
</body>
borderhtmlscripttext-align