对齐列表

对齐列表

关注
发信
关注(28)粉丝(399)

html - 如何在div中对齐列表？

我需要做一个垂直菜单，文本太远了，你可以在这里看到。如何对齐列表以使其适合div？

body{
   background-color: #018c24
}

li{
  list-style: none;

}

.contenedor{
  background-color: white;margin: auto;width: 70%;height: 800px;
  padding-top: 4px;border: 2px solid black;border-radius: 4px;
  padding-left: 4px;padding-bottom: 4px;padding-right: 4px;
}

.banner{
  background-image: url(http://www.librosweb.es/website/css/images/logo.gif);
  width: 99%;margin: auto;height: 15%;border-radius: 4px;
}

.about{
  display: table;margin: 0 auto;text-transform: uppercase;
  margin-top: 10px;font-family:sans-serif;font-weight: bold;
  color: green;
}

.about li{
  display:inline;margin: 3px;cursor: pointer;
}

.about li:hover{
  background: #f09d28;color: #000;
}

.about p{
    border-radius: 4px;display: none;background-color: #f15647
}

.nav {
  width: 20%;height: 81%;border: 2px solid black;
  border-radius: 4px;float: lefT;
}

.nav ul{
  text-align: left;
}

.principal{
  width: 78%;height: 81%;border: 2px solid black;float:right;
  border-radius: 4px;
}

<!DOCTYPE html>
<html lang="es">
    <head>
       <link href="C:\Users\Jorge\Desktop\main.css" rel="stylesheet">
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       <script type="text/javascript" src="C:\Users\Jorge\Desktop\prueba.js"></script>

       <meta charset="utf-8" />
       <title>Título de esta página</title>
    </head>

    <body>
      <div class="contenedor">
          <div class="banner">
          </div>

          <ul class="about">

                <li>Quiénes somos  </li>
                <p class="caca">CACAasd</p>
                <li>Dónde estamos  </li>
                <p class="caca">CACAasd</p>
                <li>Contacto</li>
                <p>CACAasd</p>

          </ul>

          <div class="nav">
            <ul>
              <li>AAAAAAAAAAA</li>
              <li>BBBBBBBBBBB</li>
              <li>CCCCCCCCCCCCC</li>
              <li>DDDDDDDDDDD</li>
              <li>EEEEEEEEEEEE</li>
              <li>FFFFFFFFFF</li>
              <li>GGGGGGGGGGGG</li>
              <li>HHHHHHHHHHH</li>
              <li>IIIIIIIIIII</li>
              <li>JJJJJJJJJJJJ</li>
              <li>KKKKKKKKKKKKK</li>
              <li>LLLLLLLLLLLLLL</li>
              <li>MMMMMMMMMM</li>
              <li>NNNNNNNNNNNN</li>
              <li>ÑÑÑÑÑÑÑÑÑÑÑÑ</li>
              <li>OOOOOOOOOOO</li>
              <li>PPPPPPPPPP</li>
              <li>QQQQQQQQQQQQQQQQ</li>
              <li>RRRRRRRRRRRRRR</li>
              <li>SSSSSSSSSS</li>
              <p>ACA</p>
            </ul>
          </div>

          <div class="principal"></div>
      </div>
    </body>
</html>

最佳答案

基本上，您的ul标记（默认情况下）对它们应用了填充/边距。所以，我们可以在CSS中删除它。
另外，因为菜单项没有任何空格，所以通常会跳出方框。CSS已用于li标记中以防止这种情况（word break:break word；）。当然，真正的菜单项可能有空格

body{
   background-color: #018c24
}

li{
  list-style: none;

}

.contenedor{
  background-color: white;
  margin: auto;
  width: 70%;
  height: 800px;
  padding-top: 4px;
  border: 2px solid black;
  border-radius: 4px;
  padding-left: 4px;
  padding-bottom: 4px;
  padding-right: 4px;
}

.banner{
  background-image: url(http://www.librosweb.es/website/css/images/logo.gif);
  width: 99%;
  margin: auto;
  height: 15%;
  border-radius: 4px;

}

.about{
  display: table;
	margin: 0 auto;
  text-transform: uppercase;
  margin-top: 10px;
  font-family:sans-serif;
  font-weight: bold;
  color: green;

}

.about li{
  display:inline;
  margin: 3px;
  cursor: pointer;
}

.about li:hover{
  background: #f09d28;
  color: #000;

}

.about p{
border-radius: 4px;
display: none;
background-color: #f15647
}

.nav {
  width: 20%;
  height: 81%;
  border: 2px solid black;
  border-radius: 4px;
  float: lefT;

}

.nav ul{
  text-align: left;
  padding:0px;
  margin:0px;
}

.nav ul li{
  	word-break: break-word;
}

.principal{
  width: 78%;
  height: 81%;
  border: 2px solid black;
  float:right;
  border-radius: 4px;
}

<!DOCTYPE html>
<html lang="es">
    <head>
       <link href="C:\Users\Jorge\Desktop\main.css" rel="stylesheet">
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
       <script type="text/javascript" src="C:\Users\Jorge\Desktop\prueba.js"></script>

       <meta charset="utf-8" />
       <title>Título de esta página</title>
    </head>

    <body>
      <div class="contenedor">
          <div class="banner">
          </div>

          <ul class="about">

                <li>Quiénes somos  </li>
                <p class="caca">CACAasd</p>
                <li>Dónde estamos  </li>
                <p class="caca">CACAasd</p>
                <li>Contacto</li>
                <p>CACAasd</p>

          </ul>

          <div class="nav">
            <ul>
              <li>AAAAAAAAAAA</li>
              <li>BBBBBBBBBBB</li>
              <li>CCCCCCCCCCCCC</li>
              <li>DDDDDDDDDDD</li>
              <li>EEEEEEEEEEEE</li>
              <li>FFFFFFFFFF</li>
              <li>GGGGGGGGGGGG</li>
              <li>HHHHHHHHHHH</li>
              <li>IIIIIIIIIII</li>
              <li>JJJJJJJJJJJJ</li>
              <li>KKKKKKKKKKKKK</li>
              <li>LLLLLLLLLLLLLL</li>
              <li>MMMMMMMMMM</li>
              <li>NNNNNNNNNNNN</li>
              <li>ÑÑÑÑÑÑÑÑÑÑÑÑ</li>
              <li>OOOOOOOOOOO</li>
              <li>PPPPPPPPPP</li>
              <li>QQQQQQQQQQQQQQQQ</li>
              <li>RRRRRRRRRRRRRR</li>
              <li>SSSSSSSSSS</li>
              <p>ACA</p>



            </ul>


          </div>

          <div class="principal">
          </div>




      </div>
    </body>
</html>

关于html - 如何在div中对齐列表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34561943/

10-09 01:23
Powered by LMLPHP ©2024 对齐列表 0.044630