问不分隔的html菜单
EN

Stack Overflow用户

提问于 2020-09-21 23:02:27

回答 1查看 36关注 0票数 0

我有一个包含6个项目的菜单，但它们都是粘贴的，它们之间没有分隔空间，我使用的是css文件。

admin.html

 <html lang="zxx">
  <head>
  <title>Home</title>
  <!-- Meta-Tags -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <meta name="keywords" content="Core Login Form a Responsive Web Template, Bootstrap Web Templates, Flat Web Templates, Android Compatible Web Template, Smartphone Compatible Web Template, Free Webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola Web Design">
   <!-- //Meta-Tags -->
   <!-- Index-Page-CSS -->
   <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
   <!-- //Custom-Stylesheet-Links -->
   <!--fonts -->
   <link href="//fonts.googleapis.com/css?family=Mukta+Mahee:200,300,400,500,600,700,800" rel="stylesheet">
   <!-- //fonts -->
   <!-- Font-Awesome-File -->
   <link rel="stylesheet" href="css/font-awesome.css" type="text/css" media="all">
   </head>
   <body>
   <h1 class="title-agile text-center" style="color: #000;">Area Administrativa</h1>
   <div class="content-w3ls">
      <div class="agileits-grid">
          <div class="content-bottom" >
               <a href="subir.php" >Subir archivo</a>
          </div>
          <br>
          <br>
          <br>
          <br>
          <div class="content-bottom">
              <a href="buscar.php" >Buscar rchivo</a>
          </div>
          <br>
        <br>
        <br>
        <div class="content-bottom">

            <a href="admin.php?copia=realizar" >Realizar Copia de Seguridad de archivo</a>
        </div>
        <br>
        <br>
        <br>
        <div class="content-bottom">

            <a href="acceso.php" >Registro de  Accesos</a>
        </div>
        <br>
        <br>
        <br>
        <div class="content-bottom">
            <a href="salir.php" >Salir del sistema</a>
        </div>
       </div>
      </div>
    <div class="copyright text-center">
    <p>© 2020 Sistema Gestion Documentos ISO15489
    </p>
    </div>
    <!--//copyright-->
   </body>
   <!-- //Body -->
   </html>

css文件包含应用于html的css样式。

 title-agile {
 font-size: 2.8em;
 font-weight: 600;
 text-transform: uppercase;
 color: #ffffff;
 letter-spacing: 3px;
 word-spacing: 3px;
 margin: 1em 1vw 1em;
 text-align: center;
 font-family: 'Mukta Mahee', sans-serif;
 }

 .text-center {
 text-align: center;
 }

 .content-w3ls {
 display: -webkit-flex;
 display: -webkit-box;
 display: -moz-flex;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 justify-content: center;
 align-items: center;
 -webkit-box-pack: center;
 - moz-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 }

.agileits-grid {
 max-width: 500px;
 margin: 0 5vw;
 margin-bottom: 20px;
 padding: 3.5vw;
 box-sizing: border-box;
 display: flex;
 display: -webkit-flex;
 flex-wrap: wrap;
 background: rgba(249, 249, 249, 0.24);
 box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.49);
 }
 .content-bottom {
    margin-bottom: 20px;
    padding: 1em;
 }

该页面如下所示，但div的内容文本重叠

https://i.stack.imgur.com/Afu54.jpg

我已经修改了css文件的边距-底部，但它不工作。

html

css

回答 1

Stack Overflow用户

发布于 2020-09-21 23:11:41

你错过了一个。在您的类中，只需在名为title-agile的文件中添加CSS .即可

.title-agile {
 font-size: 2.8em;
 font-weight: 600;
 text-transform: uppercase;
 color: #ffffff;
 letter-spacing: 3px;
 word-spacing: 3px;
 margin: 1em 1vw 1em;
 text-align: center;
 font-family: 'Mukta Mahee', sans-serif;
 }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63994957

复制

相似问题

问不分隔的html菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不分隔的html菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不分隔的html菜单
EN