右边的div类圆圈渲染了页面,但是甚至添加了边距:0 auto;什么都行不通只是留在那里给予了。
这是我的html / php
<?php
/*
Template Name: Home Page
*/
?>
<?php get_header(); ?>
<div id="content">
<header>
<h1><span class="tech">TECH</span><span class="basics">BASICS</span></h1>
<h2>Personal Tech Specialists</h2>
</header>
<div class="circle"></div>
</div> <!-- end #content -->
<?php get_footer(); ?>
这是我的css
html {
font-size: 16px;
}
body {
background: #BAE4FF;
font-family: "Open Sans", sans-serif;
}
nav {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
font-weight: 400;
}
nav .menu {
list-style-type: none;
padding: 0;
margin: 0;
}
nav .menu li {
padding: 3px 0 3px 0;
display: none;
}
nav .menu li a {
text-decoration: none;
color: #fff;
font-size: 2.1em;
}
nav .menu .blog {
background: #1669B5;
}
nav .menu .contact {
background: #3892E3;
}
nav #touchNav {
background: #48B4EF;
width: 100%;
display: block;
color: #fff;
font-size: 2.1em;
padding: 3px 0 3px 0;
text-decoration: none;
}
header {
margin: 50px 0 0 0;
margin-top: 50px;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 auto;
width: 100%;
}
header h1 .tech {
color: #fff;
font-weight: 500;
margin-right: 3.5px;
font-size: 1.1em;
}
header h1 .basics {
color: #48B5EF;
margin-left: 3.5px;
font-size: 1.3em;
}
header h2 {
font-size: 2.1em;
font-weight: 100;
width: 100%;
margin: 0 auto;
color: #fff;
line-height: 1.2em;
}
.circle {
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
}
答案 0 :(得分:2)
尝试添加位置标记..你可以使用固定的位置或相对适合你的需要..到.circle类。
答案 1 :(得分:2)
你的圈级边距很有趣。
请改为尝试:
.circle {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
人们应该认为这也会起作用,但更多地信任第一个:
.circle {
margin: 0 auto;
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
CSS表示级联样式表。级联意味着如果为同一元素定义了两个或多个属性,则应用最后读取的属性。因此,如果您在圆圈上定义边距,然后在同一样式表中再次定义边距,那么稍后再在第二个样式表中,在头部分中的第一个之后使用其rel链接,然后在样式中的rel链接之后在头部分本身中标签,然后再次内联元素本身,然后使用内联值。事实上,这是他们使用的顺序。
答案 2 :(得分:0)
li
内的{{1} 。ul
之间的空间,而不会影响li
和li
之间的间距
为了做到这一点,你应该给ul
一个ul
。
希望它有所帮助