Fatal编程技术网
  • html/
  • Html 不需要的空白

Html 不需要的空白

html css

Html 不需要的空白,html,css,Html,Css,我想在相邻的位置添加3个水平段落。 我唯一能弄明白的方法是使用position属性，但我得到了这个结果 我试图使它尽可能干净，但它总是以这种方式出现，这是我的代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Promotions </title> <link href="project.css" rel="stylesheet" typ

我想在相邻的位置添加3个水平段落。 我唯一能弄明白的方法是使用position属性，但我得到了这个结果

我试图使它尽可能干净，但它总是以这种方式出现，这是我的代码：

  <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Promotions </title>
<link href="project.css" rel="stylesheet" type="text/css">
</head>

<body class="body">
<ul id="menu">
    <li><a href="tyre plus.html">Home</a></li>
    <li><a href="promotions.html">Promotions</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Customers</a></li>
    <li><a href="#"> Contact Us</a></li>
    <li><a href="#">Order Now</a></li>
    <li><a href="branches.html">Branches</a></li>
    <li><a href="#">References</a></li>

</ul>

  <header><img class="banner" src="images/banner.jpg" width="1000" height="120" alt=" Tyre Plus Banner"/></header>
  <br>
  <br>
  <nav></nav>
  <br><br> <br><br><br>
  <section>
<img class="img2" src="C:\Users\Ghanim\Downloads\tyre plus\tyre plus\loyalty.jpg" alt="Loyalty Cards" ></img>
<br><br><br> <br><br><br>
<h2> 15% Blue Loyalty Card </h2>
<p> 15% off on following services: 
<ul>
<li> Disk Skimming </li>
<li> Tyre Balancing </li>
<li> Tyre Fitting </li>
<li> Oil Change </li>
<li> Alignment </li>

<li class="li"> <b><em> FREE Rotation </b></em> </li> 
<li class="li"> <b><em> FREE 50 Checkpoint Check-Up </b></em> </li> 
</ul>
</p>

<h2 class="center" align="center"> 20% Silver Loyalty Card </h2>
<p class="center"align="center"> 20% off on following services: </p>
<p class="center"align="center"> Disk Skimming </p>
<p class="center"align="center"> Tyre Balancing </p>
<p class="center"align="center"> Tyre Fitting </p>
<p class="center"align="center"> Oil Change </p>
<p class="center"align="center"> Alignment </p>
<p class="center"align="center" > <b><em> <span style="color:red"> FREE Rotation </span> </b></em> <p>
<p class="center" align="center"> <b><em> <span style="color:red"> FREE 50 Checkpoint Check-Up </span> </b></em> <p>


<h2 class="right" align="right"> 30% Gold Loyalty Card </h2>
<p class="right" align="right"> 30% off on following services: </p>
<p class="right"align="right"> Disk Skimming </p>
<p class="right"align="right"> Tyre Balancing </p>
<p class="right"align="right"> Tyre Fitting </p>
<p class="right"align="right"> Oil Change </p>
<p class="right"align="right"> Alignment </p>
<p class="right"align="right" > <b><em> <span style="color:red"> FREE Rotation </span> </b></em> <p>
<p class="right" align="right"> <b><em> <span style="color:red"> FREE 50 Checkpoint Check-Up </span> </b></em> <p>
<p class="right"align="right" > <b><em> <span style="color:red"> FREE Alignment Check-Up </span> </b></em> <p>
<p class="right"align="right" > <b><em> <span style="color:red"> FREE Oil To-Up </span> </b></em> <p>

  </section>

  <hr>
  <footer class="footer">Copyright &copy 2015 All Rights Reserved - Tyre Plus - Central Trading Company </footer>
  <p class="footer2"> For more info please contact us on <a href="mailto:tyreplus.ae"> Tyre Plus </a>

</body>
</html>
和这里的图片一样，我的问题是对齐，我不知道如何正确对齐，水平对齐

谢谢。

这是一项古老的技术，但您可以使用表格来帮助您设置网站和段落的格式。如果做得正确，它看起来会很漂亮

哦，哇，这很有用，如果我想对图像做同样的事情，那也有可能吗？你应该能够将任何东西塞进表格的列或行中。没问题。如果你还有其他问题，请告诉我。如果这回答了你的问题，请相应地标记。祝你的网站好运！：D@Ghanim世界各地的互联网和web开发人员都恳求您不要使用表格进行页面布局！我不想否决这个答案，但你应该重新考虑，因为这是一个糟糕的建议。我认为表格可以用于快速格式化，甚至是布局。然而，选择你想要的。这是我的建议（我不认为这是一个糟糕的建议），如果你决定它不适合你，那就好了。总有其他方法可以使用。您可以使用容器，然后使用css将所有内容相应地排列起来。我只是在给你我认为更好的方法。 
.banner
{
position:relative;
text-align: center;
right:-100px;
margin-top:50px;
}

.body
{
background-color: #A9E2F3;
border: 40px solid;
border-color: #0B173B;
padding: 30px;

}


.para
{
margin:auto;
text-align: center;
width:800px;
font-family: calibri;
font-size: 18px;
margin-bottom:30px;
font-style: oblique;
}

.para2
{
font-family: calibri;
right:-50px;
position:relative;
font-size: 14px;

}

.para3
{
font-family: calibri;
right:-90px;
position:relative;
}

.alshami
{
position:relative;
right: -550px;
top:-500px;
}

.h1
{
font-size: 34px;
color:black;
font-family:arial;
text-align: center;

}

.img
{
display:block;
margin-left: auto;
margin-right:auto;
}

.img2
{
display:block;
margin-left: auto;
margin-right:auto;
}

.footer
{
margin-top:30px;
position:relative;
right:-310px;
margin-bottom: 30px;
font-size: 18px;
font-family: arial;
}

.footer2
{
position:relative;
right:-400px;
margin-bottom: 10px;
font-size: 18px;
font-family: arial;
}

#menu {
    list-style:none;
    width:910px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    /* Rounded Corners */

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    /* Background color and gradients */

    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

    /* Borders */

    border: 1px solid #002232;

    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;

    /* Background color and gradients */

    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

    /* Rounded corners */

    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
    padding-right:21px;
    background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("img/drop.png") no-repeat right 7px;
}

.loyalty
{
position:relative;
right:-500px;
top:-230px;
}

.li
{

font-style: italic;
color: red;
}

.loyalty2
{
font-size:27px;
position:relative;
right:-500px;
top:-250px;
}

.center
{
position:relative;
top:-230px;
}

.right
{
position:relative;
top:-550px;
}