[css] 使卡片视图字段名与字段内容横向显示

思源笔记卡片视图显示字段名称时的默认效果：

开启 CSS 片段之后的效果：

本 CSS 片段完全由 Gemini 自动生成，本人未做任何改动，如有 bug，欢迎交流。

/*
 * 思源笔记 - 卡片视图字段名与字段内容左右排列
 * 本代码由Gemini自动生成
*/

/* 1. 核心布局：将每个字段的容器设置为 Flex 布局 */
.av__gallery-field {
    display: flex;          /* 开启 Flex 布局，让内部的“字段名”和“字段值”横向排列 */
    align-items: baseline;  /* 垂直方向上按文字基线对齐，视觉效果更佳 */
    gap: 4px;               /* 在字段名和字段值之间添加 8px 的间距 */
}

/* 2. 字段名样式：防止被压缩 */
.av__gallery-name {
    flex-shrink: 0;        /* 防止在空间不足时，字段名被挤压变形 */
    white-space: nowrap;   /* 防止字段名过长时换行 */
}

/* 3. 字段值样式：自动填充剩余空间 */
.av__cell {
    flex-grow: 1;          /* 让字段值自动伸展，占据所有剩余的横向空间 */
}
/* 4. 让所有字段值左侧对齐 */
.av__gallery-name {
    width: 80px;  // 设置一个固定的宽度，请根据您最长的字段名调整这个数值
}