初心者、まだ始めていないのでアドバイスをください_html/css

初心者、まだ始めていないのでアドバイスをください_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:00:38

オリジナル

1122 人が閲覧しました

这个怎么实现居中

無标题文档

電子付属品

電脑整机

订购

联系我们

回帰讨论(解决方案)

float元素不处理是在居中不可，特別処理必要：

デモはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>无标题文档</title>    <style type="text/css">        #most{width:780px;height:30px;background:#f0f0f0;float:left;border:1px solid #ccc; position:relative; left:50%; margin-left:-390px;}        #most ul{padding:0px;list-style:none;float:left;width:8000px;margin:0px auto}        #most li{float:left}        #main{float:left}        #most a{display:block;width:119px;height:30px;color:#333;text-align:center;line-height:29px;text-decoration:none;font-size:14px;font-weight:bold}        #most a:hover{background-color:#FFF;color:#333}    </style></head><body><div id="most">    <div id="main">        <ul>            <li><a href="#">电子配件</a></li>            <li><a href="#">电脑整机</a></li>            <li><a href="#">需要订购</a></li>            <li><a href="#">联系我们</a></li>        </ul>    </div></div></body></html>

ログイン後にコピー

これは你原来基基地上にあるものです扩展、このような方法でのみ緊急、
margin:0 auto;
margin:0 auto;
margin:0 auto; これは、Web サイトの大部分で採用されている、高効率、安全、確実、強力な方法です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>无标题文档</title>    <style type="text/css">        #most{width:780px;height:30px;background:#f0f0f0;margin: 0 auto;border:1px solid #ccc;}        #most ul{padding:0px;list-style:none;float:left;width:8000px;margin:0px auto}        #most li{float:left}        /*#main{float:left}*/        #most a{display:block;width:119px;height:30px;color:#333;text-align:center;line-height:29px;text-decoration:none;font-size:14px;font-weight:bold}        #most a:hover{background-color:#FFF;color:#333}        .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}        .clearfix{display:inline-block;}        .clearfix{display:block;}    </style></head><body><div id="most">    <div id="main">        <ul class="clearfix">            <li><a href="#">电子配件</a></li>            <li><a href="#">电脑整机</a></li>            <li><a href="#">需要订购</a></li>            <li><a href="#">联系我们</a></li>        </ul>    </div></div></body></html>

ログイン後にコピー

常用居中margin:0 auto;