1

我想从这个http://i.imgur.com/XesXy.png更改为这个http://prntscr.com/o9hfh 如何在两侧添加额外的间隙并将文本更多地挤压在一起？基本上我想在不使用 text-align:center 的情况下将文本居中，因为我更喜欢 text-align:left，但如果我离开，文本将不再位于中心。

HTML

<body> <!-- start of the body-->
            <ul class="sidemenu">
                <li><a href="">About Us</a></li>
                <li><a href="">Contact Us</a></li>
                <li><a href="">FAQ</a></li>
                <li><a href="">How To Order</a></li>
                <li><a href="">Term And Agreement</a></li>
                <li><a href="">Shipping Information</a></li>
            </ul>
            <div id="about-us">

            <p><h2>About Us</h2>Lorem ipsum .<br />

Morbi in libero quis quam consequat malesuada..</p>
            </div>

            </body>

CSS：

#about-us {
margin: 10px auto;
background-color:#FFF;
height:800px;
width:710px;
left:125px;
position: relative;
padding:0em 0em;

}

#about-us p {
text-align:left;
padding-top: 20px;

}

body {
position:relative;
}

.sidemenu{
position:absolute;
background-color: #fff;
width:240px;
height:780px;
margin-top: 10px;
list-style:none;
text-align:left;
padding-top: 20px;


}

.sidemenu li a{
color:#222222;
padding: 0em 1em;
line-height: 2em;

}

4

6 回答 6

1

也许试试padding

 #about-us p {
   padding: 0 2% (or px, ems if you prefer);
 }

或者，您可以margin以相同的方式使用。

于 2013-01-06T01:06:29.543 回答
1

使用左右填充。

像这样的东西：

#about-us p {
padding: 20px 20px 0  20px;
}
于 2013-01-06T01:07:16.690 回答
1

只需将填充添加到 #about_us 框，同时相应地对其宽度和高度进行切片： 

#about_us {
           padding:20px 40px;
          }

并为 p 标签配置行高：

#about_us p {
       line-height:40px;
      }
于 2013-01-06T01:27:22.617 回答
0

您可以在段落上使用填充来实现更多的侧面间距：

#about-us p {
    padding: 0 40px;
}

请注意，这是以下的简写：

#about-us p {
    padding-left: 40px;
    padding-right: 40px;
}
于 2013-01-06T01:05:30.783 回答
0

将文本挤在一起使用

line-height:15px

并简单地使用边距或填充来安排

于 2013-01-06T01:10:05.640 回答
0

不要将您的 h2-tags（或任何标题标签）放在 p-tag 内。

在 div#about-us 上添加一些填充

于 2014-07-25T09:44:21.407 回答