Question

我想在彼此旁边添加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>

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;
}

除了这里的图像，我的问题是对齐我不知道如何正确地进行，水平对齐。

http://postimg.org/image/jqjr7bv3n/

谢谢。

Answer 1

这是一项旧技术，但您可以使用表格来帮助您格式化网站和段落。如果操作正确，它看起来非常好。

http://www.w3schools.com/html/html_tables.asp

不需要的空白区域

1 个答案: