如何避免HTML中的框太远？

时间：2016-09-01 06:52:42

标签： html css

这就是我目前的目标（当然，减去红色箭头）：

enter image description here

我对CSS有些不方便，我自己也无法解读。当我进入我的页面时，这就是显示的内容：

enter image description here

这是页面本身的代码：

＆＃13;
＆＃13; 
body{
    font-family:arial;
    font-size:12px;
}

#contenedor{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid#666;
}
#cabecera{
    background-image: url(http://content.escuelaninja.com/images/infosil.png);
    min-height:100px;
}
#cabecera span{
    float:right;
    color:#fff;
    margin-top:20px;
    margin-right:20px;
}
#barra{
    padding:10px;
    background-color:#0e1a46;
    color:white;
}
#barra a {
    color: white;
}
#barra span{
    float:right;
}
#pie {
    text-align:center;
    color: #fff;
    background-color:#666;
    padding:10px;
    clear:both;
}
#barra-lateral{
    float:left;
    min-height:200px;
    width:25%;
}
#principal{
    margin-left:25%;
}
#barra-lateral nav { 
    border: 1px solid #c5c5c5;
    border-radius:6px;
    background-color:#f0f0f0;
    margin:15px;

}
#barra-lateral nav section{
    margin:6px;
}
#barra-lateral nav section header{
    padding:8px;
    font-weight:bold;
    color: #fff;
    background-color:#225ea2;
}
#barra-lateral ul{
    background-color:#fff;
    margin:0;
    padding-left:0;
    list-style-type:none;

}
#barra-lateral ul li{
    padding:4px;
    padding-left:15px;
}
#mis-cursos{
    color:#0e1a46;
    text-align:center;
}
#lol{
    border:1px solid black;
    margin-left:27%;
    margin-right:10%;
    margin-top:0;
    clear:right;
    background-color:#12306b;
    color:white;
    padding:10px;
}
#bloque{
       border:1px solid gray;
    margin-left:27%;
    margin-right:10%;
    margin-top:0%;
    background-color:#eaeaeb;
}
#bloque li{
    border:1px solid gray;
    padding:7px;
    list-style-type:none;
    margin-left:25.9%;

}
#carreras ul {
    margin-left:10px;
    list-style-type:none;
}
＆＃13; 
<!doctype html>
<html>
    <head>
        <title>Infosil</title>
        <link rel="stylesheet" href="infosil.css">
    </head>
    <body>
        <section id="contenedor">
            <header id="cabecera">
                <span>Gianmarti Meza Machaca</span>
            </header>
                <div id="barra">
                    <a href="" >inicio</a>
                    <a href="">Cerrar sesión</a>
                    <span>Viernes 26 de agosto de 2016</span>
                </div>
                <aside id="barra-lateral">
                    <nav>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registrar notas</li>
                                <li>>Mensajes</li>
                                <li>>Publicar materiales</li>
                            </ul>
                        </section>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registro docente</li>
                                <li>>Mis capacitaciones</li>
                            </ul>
                        </section>
                    </nav>
                </aside>
                <h1 id="mis-cursos">Mis cursos</h1>
                <section id="carreras">
                            <header id="lol">USIL - CARRERAS UNIVERSITARIAS : Periodo - 2016-02 </header>
                            <ul id="bloque">
                                <li>TALLER DE SOFTWARE II (FC-INF TALLSFW2) - Bloque: FC-PREINF02C1M</li>
                                <li>ANÁLISIS Y DISEÑO DE DATOS (FC-INF ANADISDA) - Bloque: FC-PREINF02P1T</li>
                            </ul>
                        </section>
                <section id="principal"></section>
                <footer id="pie">UNIVERSIDAD SAN IGNACIO DE LOYOLA / Av. La Fontana 550, La Molina Lima - Perú Central Telefónica (511) 317 - 1000</footer>
        </section>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

我知道CSS的bloque li和carreras ul部分有问题，如果有人可以帮助我，我会非常感激。

提前致谢

3 个答案:

答案 0 :(得分：2)

您应该尝试使用网格库。 （一个流行的带网格的css库是http://getbootstrap.com/css/）

无论如何这是一个快速修复https://jsfiddle.net/rdrchdtw/1/ 

#bloque li{
   border:1px solid gray;
   padding:7px;
   list-style-type:none;
   //margin-left:25.9%;  //Remove this
}

#carreras ul {
    margin-left:10px;
    list-style-type:none;
    margin-left:27%;     //Add this
    padding-left:0px;    //Add this
}

答案 1 :(得分：0)

body{
    font-family:arial;
    font-size:12px;
}

#contenedor{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid#666;
}
#cabecera{
    background-image: url(http://content.escuelaninja.com/images/infosil.png);
    min-height:100px;
}
#cabecera span{
    float:right;
    color:#fff;
    margin-top:20px;
    margin-right:20px;
}
#barra{
    padding:10px;
    background-color:#0e1a46;
    color:white;
}
#barra a {
    color: white;
}
#barra span{
    float:right;
}
#pie {
    text-align:center;
    color: #fff;
    background-color:#666;
    padding:10px;
    clear:both;
}
#barra-lateral{
    float:left;
    min-height:200px;
    width:25%;
}
#principal{
    margin-left:25%;
}
#barra-lateral nav { 
    border: 1px solid #c5c5c5;
    border-radius:6px;
    background-color:#f0f0f0;
    margin:15px;

}
#barra-lateral nav section{
    margin:6px;
}
#barra-lateral nav section header{
    padding:8px;
    font-weight:bold;
    color: #fff;
    background-color:#225ea2;
}
#barra-lateral ul{
    background-color:#fff;
    margin:0;
    padding-left:0;
    list-style-type:none;

}
#barra-lateral ul li{
    padding:4px;
    padding-left:15px;
}
#mis-cursos{
    color:#0e1a46;
    text-align:center;
}
#lol{
    border:1px solid black;
    margin-right:10%;
    margin-top:0;
    clear:right;
    background-color:#12306b;
    color:white;
    padding:10px;
}
#bloque{
       border:1px solid gray;
    margin-right:10%;
    margin-top:0%;
    background-color:#eaeaeb;
}
#bloque li{
    border:1px solid gray;
    padding:7px;
    list-style-type:none;

}
#carreras {
	margin-left: 260px;
}
#carreras ul {
    list-style-type:none;
    padding: 0;
}
<!doctype html>
<html>
    <head>
        <title>Infosil</title>
        <link rel="stylesheet" href="infosil.css">
        <link rel="stylesheet" href="sample.css">
    </head>
    <body>
        <section id="contenedor">
            <header id="cabecera">
                <span>Gianmarti Meza Machaca</span>
            </header>
                <div id="barra">
                    <a href="" >inicio</a>
                    <a href="">Cerrar sesión</a>
                    <span>Viernes 26 de agosto de 2016</span>
                </div>
                <aside id="barra-lateral">
                    <nav>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registrar notas</li>
                                <li>>Mensajes</li>
                                <li>>Publicar materiales</li>
                            </ul>
                        </section>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registro docente</li>
                                <li>>Mis capacitaciones</li>
                            </ul>
                        </section>
                    </nav>
                </aside>
                <h1 id="mis-cursos">Mis cursos</h1>
                <section id="carreras">
                            <header id="lol">USIL - CARRERAS UNIVERSITARIAS : Periodo - 2016-02 </header>
                            <ul id="bloque">
                                <li>TALLER DE SOFTWARE II (FC-INF TALLSFW2) - Bloque: FC-PREINF02C1M</li>
                                <li>ANÁLISIS Y DISEÑO DE DATOS (FC-INF ANADISDA) - Bloque: FC-PREINF02P1T</li>
                            </ul>
                        </section>
                <section id="principal"></section>
                <footer id="pie">UNIVERSIDAD SAN IGNACIO DE LOYOLA / Av. La Fontana 550, La Molina Lima - Perú Central Telefónica (511) 317 - 1000</footer>
        </section>
    </body>
</html>

答案 2 :(得分：0)

似乎解决了〜

  

^。^

＆＃13;
＆＃13; 
body{
    font-family:arial;
    font-size:12px;
}

#contenedor{
    width:1000px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid#666;
}
#cabecera{
    background-image: url(http://content.escuelaninja.com/images/infosil.png);
    min-height:100px;
}
#cabecera span{
    float:right;
    color:#fff;
    margin-top:20px;
    margin-right:20px;
}
#barra{
    padding:10px;
    background-color:#0e1a46;
    color:white;
}
#barra a {
    color: white;
}
#barra span{
    float:right;
}
#pie {
    text-align:center;
    color: #fff;
    background-color:#666;
    padding:10px;
    clear:both;
}
#barra-lateral{
    float:left;
    min-height:200px;
    width:25%;
}
#principal{
    margin-left:25%;
}
#barra-lateral nav { 
    border: 1px solid #c5c5c5;
    border-radius:6px;
    background-color:#f0f0f0;
    margin:15px;

}
#barra-lateral nav section{
    margin:6px;
}
#barra-lateral nav section header{
    padding:8px;
    font-weight:bold;
    color: #fff;
    background-color:#225ea2;
}
#barra-lateral ul{
    background-color:#fff;
    margin:0;
    padding-left:0;
    list-style-type:none;

}
#barra-lateral ul li{
    padding:4px;
    padding-left:15px;
}
#mis-cursos{
    color:#0e1a46;
    text-align:center;
}
#lol{
    border:1px solid black;
    margin-right:10%;
    margin-top:0;
    clear:right;
    background-color:#12306b;
    color:white;
    padding:10px;
}
#bloque{
       border:1px solid gray;
    margin-right:10%;
    margin-top:0%;
    background-color:#eaeaeb;
}
#bloque li{
    border:1px solid gray;
    padding:7px;
    list-style-type:none;

}
#carreras {
	margin-left: 260px;
}
#carreras ul {
    list-style-type:none;
    padding: 0;
}
＆＃13; 
<!doctype html>
<html>
    <head>
        <title>Infosil</title>
        <link rel="stylesheet" href="infosil.css">
        <link rel="stylesheet" href="sample.css">
    </head>
    <body>
        <section id="contenedor">
            <header id="cabecera">
                <span>Gianmarti Meza Machaca</span>
            </header>
                <div id="barra">
                    <a href="" >inicio</a>
                    <a href="">Cerrar sesión</a>
                    <span>Viernes 26 de agosto de 2016</span>
                </div>
                <aside id="barra-lateral">
                    <nav>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registrar notas</li>
                                <li>>Mensajes</li>
                                <li>>Publicar materiales</li>
                            </ul>
                        </section>
                        <section>
                            <header>Desarrollo de clases</header>
                            <ul>
                                <li>>Registro docente</li>
                                <li>>Mis capacitaciones</li>
                            </ul>
                        </section>
                    </nav>
                </aside>
                <h1 id="mis-cursos">Mis cursos</h1>
                <section id="carreras">
                            <header id="lol">USIL - CARRERAS UNIVERSITARIAS : Periodo - 2016-02 </header>
                            <ul id="bloque">
                                <li>TALLER DE SOFTWARE II (FC-INF TALLSFW2) - Bloque: FC-PREINF02C1M</li>
                                <li>ANÁLISIS Y DISEÑO DE DATOS (FC-INF ANADISDA) - Bloque: FC-PREINF02P1T</li>
                            </ul>
                        </section>
                <section id="principal"></section>
                <footer id="pie">UNIVERSIDAD SAN IGNACIO DE LOYOLA / Av. La Fontana 550, La Molina Lima - Perú Central Telefónica (511) 317 - 1000</footer>
        </section>
    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题