如何在<p>保持正确的段落模式的同时正确对齐内部的文本?

  • 本文关键字:模式 对齐 内部 文本 段落 html
  • 更新时间 :
  • 英文 :


指定边距后,文本将在和

部分逐字显示。我希望第一个和

标签的内容在左边,第二个和

标签的内容位于右边。我想根据左边距、右边距和内联样式等属性来解决此操作。我目前正在接受这个级别的培训,我必须使用这个工具进行练习

<!doctype html>
<html lang="en";>
<head>

<title>solarise_mk</title>


</head>
<body style="background-color:rgb(233, 150, 122);">
<br>
<br>
<br>

<!--Several nested tags to create a key to link to another site-->
<!--start coding for  the key -->

<a href="https://www.herzing.edu/description/computer-programmer ">
<h1 style="text-align:center;">
<mark  style="background-color:rgb(64,224,208);
color:rgb(233, 150, 122);
padding:30px;
border-radius:35px;
font-family:Times New Roman";> 

solarise-mk
</mark>
</h1>
</a>

<!--end coding for yhe key-->

<br>
<br>  
<br>
<br>   
<br>  


<!--The following code is for inserting a photo from another site-->
<center>     

<img src="https://www.herzing.edu/sites/default/files/styles/fp_960_640/public/2020-09/it_computer_programming.jpg.webp?itok=8aEwtSxk" alt="What Does a Computer Programmer Do?" style="width:1000px;height:700px;">


</center>

<!--ending coding for photo-->


<br>
<br>  
<br>
<br>
<br> 

<!--start first Start the first header and paragraph-->

<h3 style="color:rgb(139,0,139);font-family:Times New Roman;margin-left: 10%;margin-right: 90%;">Site goals:</h3>
<p style="color:rgb(255,240,245);font-family:Times New Roman;;margin-left: 10%;margin-right: 90%;">
we want to introduce you 
exciting art of computer programming
And what programming is,what capabilities
are needed...
If you find you are interested in this 
technique And you have traces of the ability 
to accurately observe and then analyze
them correctly,Join us to enter the field of
programming professionally
</p>
<!--end first the firstparagraph-->

<br>
<br>  
<br>
<br>
<br> 

<!--Start the second header and paragraph-->

<h3 style="color:rgb(119,136,153);font-family:Times New Roman;margin-left: 90%;margin-right: 10%;">As the site owner:</h3>
<p style="color:rgb(230,230,250);font-family:Times New Roman;;margin-left: 90%;margin-right: 10%;">

Ever since I got to know myself, I have noticed
I prefer to have a private and safe environment
to think about analyzing problems and to
discovering creative solutions to solve them.
Usually I look around in detail, Unless I'm
focused on fatigue.I am interested in mathematics,
painting and artwork.Of course, mathematics,
except for arithmetic and mental counting,because
sometimes it is difficult for me to concentrate
and I basically know this as long as there 
is a calculator.
People around me tell me that you are smart but 
distracted and I believe in this judgment.
Distraction has become a problem for me in 
many places,if I did not have the other 
capabilities next to it might have been a 
problem .
Finally, I love programming and one of
my goals is to specialize in this field e.        
                                                                                                                                  

                                                           
                                                                                                                          
</p>
<!--end the second header and paragraph-->

</body>
</html>

在一个单独的段落标记内完成所有这些操作是不必要的,而且通常不会完成。相反,您应该将内容分成3个部分。一个用于左侧内容,一个用于中间内容,最后一个用于右侧内容。使用<div>标签(或其他元素,如<aside><main>(执行此操作:

<div class="left_div">Left content</div>
<div class="center_div">Center content</div>
<div class="right_div">Right content</div>
/* css */
.left_div { width: 20%; text-align: left; }
.center_div { width: 60%; text-align: center; }
.right_div { width: 20%; text-align: right; }

这会产生3个部分或分区,其中文本对齐负责对齐div的内容。

您也可以在图像元素或按钮元素上使用float: left;(或right;(,使这些元素移到一边,同时使其周围的文本围绕浮动的对象流动。这通常是通过文本中的图像来完成的。

最新更新