css 只有div的顶部是可点击的-为什么?

puruo6ea  于 2023-03-05  发布在  其他
关注(0)|答案(1)|浏览(153)

我正在做一个网站在Streamlit。与HTML和CSS,我试图把一个可点击的标志左上角,和文字死点在同一行,无论标志的位置。我已经设法使标志时,它是不是位于同一行的标志与base64编码。然而,当我尝试使用div技巧把logo和标题放在同一行而不影响标题的位置时,只有logo的顶部是可点击的。2有人能解释一下我的代码哪里出错了吗?

import base64
from typing import Final
from pathlib import Path

import streamlit as st

HOME_DIR: Final = Path(__file__).parent.resolve()
TITLE: Final = "Example page"

@st.cache_data(persist="disk")
def clickable_image(img_path: str, link: str) -> str:
    """By default, st.image doesn't support adding hyperlinks to a local image, so I
    have to decode a local image to base64 and pass it to HTML markdown instead.

    Parameters:
    -----------
    img_path : str
        Path to where your image is stored.
    link : str
        URL which you would like to open when the image is clicked on.
    Returns:
    -----------
    str
        A cached hyperlink where your local image is stored inside via base64 encoding.
    """
    img_path = HOME_DIR / img_path
    img_bytes, ext = img_path.read_bytes(), img_path.suffix
    encoded_img = base64.b64encode(img_bytes).decode()

    return (
        f'<div style="display: inline-block;">'
        f'<a href="{link}" target="_blank">'
        f'<img src="data:image/{ext};base64,{encoded_img}" width="100"></a>'
        f"</div>"
    )

def pretty_title(title: str, img_path: str, link: str) -> None:
    """Make a centered title, and give it a red line. Adapted from
    'streamlit_extras.colored_headers' package.

    Parameters:
    -----------
    title : str
        The title of your page.
    img_path : str
        Path to where your image is stored.
    link : str
        URL which you would like to open when the image is clicked on.
    """
    # Define the logo and text
    logo_html = clickable_image(img_path, link)
    text_html = "<h2 style='text-align: center; margin-top: 0;'>" f"{title}</h2>"

    # Define the HTML for the logo and text side by side
    html = (
        "<div style='position: relative;'>"
        f"<div style='position: absolute; top: 0; left: 0;'>{logo_html}</div>"
        f"<div style='text-align: center;'>{text_html}</div>"
        "</div>"
        "<hr style='background-color: #ff4b4b; margin-top: 0;"
        " margin-bottom: 0; height: 3px; border: none; border-radius: 3px;'></hr>"
    )

    # Render the HTML in the Streamlit app
    st.markdown(html, unsafe_allow_html=True)

def main() -> None:
    st.set_page_config(
        page_title=TITLE,
        page_icon="📖",
        layout="wide"
    )

    pretty_title(TITLE, "logo.png", "https://www.google.com/")

main()
z9smfwbn

z9smfwbn1#

我通过为图像div设置更高的z-index优先级来解决这个问题:

"<div style='position: relative; z-index: 1'>"
f"<div style='position: absolute; top: 0; left: 0; z-index: 2'>{logo_html}</div>"

相关问题