Question

我希望将所有文字移动一定数量，我不希望它居中。我可以添加或修复我的代码以使其成为可能吗？我希望h2，h3和p与h2当前在菜单旁边的位置对齐。如果您无法理解我想要问的内容，我很抱歉。提前谢谢。

＆＃13;

body
    	{
    	background-color:#333;
    	color:#999
    	font: 12px/1.4em Arial,sans-serif;
    	}
    #wrap
    	{
    	margin-left: 10px auto;
    	background: black;
    	padding:10px;
    	width: 100px;
    	float:left;
    	}
    #header
    	{
    	background-color:black;
    	color: #fff;
    	}
    #logo
    	{
    	float: center;
    	font-size: 30px;
    	line-height:0px;
    	padding: 5px;
    	}
    #navWrap
    	{
    	height:50px;
    	float:center;
    	}
    #nav ul
    	{
    	margin: 1px;
    	padding:1px;
    	float:left;
    	}
    #nav li
    	{
    	float:left;
    	padding: 5px;
    	background-color: black;
    	margin: 0 5px;
    	color: white;
    	list-style-type: none
    	}
    #nav li a
    	{
    	color:white;
    	text-decoration: none;
    	font-size: 15px;
    	float:left;
    	text-indent:0px;
    	}
    #nav li a:hover
    	{
    	text-decoration: underline;
    	float:left;
    	}
    br.clearLeft
    	{
    	clear: left;
    	}
    h1
    	{
    	color:cyan;
    	text-align:center;
    	border-bottom: double 5px;
    	}
    h2
    	{
    	color:red;
    	}
    h3
    	{
    	color:cyan;
    	}
    p
    	{
    	color:#DBDBDB;
    	font-size:22px;
    	}

＆＃13;

    <body>
        <div id="wrap">
            <div id="header">
                <div id="logo"></div>
                <div id="navWrap">
                    <div id="nav">
                        <ul>
                            <li><a href="x" ; class="smothScroll">Home</a></li>
                            <li><a href="xl" ; class="smothScroll">About</a></li>
                            <li><a href="x" ; class="smothScroll">My Tumblr</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <h1>x</h1>
        <h2>x</h2>
        <hr>
        <p>x</p>
        <p>x</br>xe</br>x</br>Lx</p>
        <p>Rxy</br>x</br>x</br>x</p>
        <p>Rx</br>x x</br>x</br>x</p>
        <p>x</br>xarex</br>Ix</br>M</p>

＆＃13;

Answer 1

您可以向body添加填充

body { 
  padding-left: 120px; 
  /* this "moves" the content inside body 120px to the right (120 = 100 + padding 2*10) */
}

如果您需要现在的wrap元素，只需添加一个负余量

#wrap {
  margin-left: -110px; 
  /* -90px because it was originally 10px, so you need to substract 120px from that */
}

Answer 2

您可以使用css：

position:relative

然后使用top，left，bottom和right属性以您想要的方式移动元素：

position:relative;
bottom:10px;
top:5px;

看看这个小提琴：

http://jsfiddle.net/ha7e7wz1/

移动所有文本

2 个答案: