HTML MKDocs 更改标题的颜色和大小

问题描述 投票：0回答：1

下面的代码适用于使用 MKDocs 的 GitHub 存储库/材料的微型网站。该代码用于下拉菜单，该菜单将展开并显示可单击的图像。我正在尝试将蓝色横幅的大小减小一半并删除左侧的铅笔图标。如何重写我的代码以使横幅不会一直延伸？如何删除左侧的铅笔图标？红色箭头是我希望横幅停止的位置。

<!DOCTYPE html>  
<html>  
<head>  
  <style>  
    a {  
      display: inline-block;  
      padding: 50px;  
      text-decoration: none;  
    }  
    a:hover {  
      box-shadow: 0 0 50px blue;  
    }  
  </style>  
</head>  
<body>  
  <details>  
  <summary style="font-size: 25px;">Acute & Post Acute</summary>  
  <div class="image-container">  
    <a href="https://website.com">  
      <span style="content:url('Media/Image_1.png')"></span>  
    </a>
  </div>  
</details>  
</body>  
</html>

我尝试添加内容但无法缩短长度。

html mkdocs-material
1个回答
0
投票

因此，我将横幅的高度减少了一半，并将锚点 (

<a>
) 标签的内边距从 
50px
更改为 
25px
。

通过将锚标签的宽度设置为

200px
来限制横幅的宽度，使其不会超过容器的整个宽度。

我做的最后一件事是，通过将 

list-style: none;
添加到 
summary
元素来删除默认列表样式，并使用 
details > summary::-webkit-details-marker { display: none; }
删除基于 WebKit 的浏览器中的默认标记，从而消除铅笔图标。

<!DOCTYPE html>
<html>
<head>
  <style>
    a {
      display: inline-block;
      padding: 25px; /* Reduced padding to half (from 50px to 25px) */
      text-decoration: none;
      background-color: lightblue; /* Ensure the background color is set */
      width: 200px; /* Set a specific width to shorten the banner */
      box-sizing: border-box; /* Include padding in the element's total width and height */
    }
    a:hover {
      box-shadow: 0 0 50px blue;
    }
    .image-container {
      display: flex;
      justify-content: flex-start; /* Align the content to the left */
    }
    details > summary {
      font-size: 25px;
      list-style: none; /* Remove default list styling, including icons */
    }
    /* Remove the default marker (such as a pencil icon) in WebKit browsers */
    details > summary::-webkit-details-marker {
      display: none;
    }
  </style>
</head>
<body>
  <details>
    <summary>Acute & Post Acute</summary>
    <div class="image-container">
      <a href="https://website.com">
        <span style="display: block;">
          <img src="Media/Image_1.png" alt="Clickable Image" style="max-width: 100%; height: auto;">
        </span>
      </a>
    </div>
  </details>
</body>
</html>

希望有帮助:)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.