如何在Splunk Classic XML仪表盘单面板中横向排列输入控件与HTML文本？

方案一：使用Splunk原生布局结构（推荐） #

利用Splunk仪表盘的row和column组件，将输入控件与HTML文本放在同一行的不同列中，事件模块单独置于下方。修改后的XML代码如下：

<panel id="panel1">
    <!-- 横向排列的输入控件与HTML文本 -->
    <row>
        <column width="50%">
            <input type="text" token="tk1" id="tk1id" searchWhenChanged="true">
                <label>Refine further?</label>
                <prefix> | where </prefix>
            </input>
        </column>
        <column width="50%">
            <html id="htmlid">
                <p>count: $job.resultCount$</p>
            </html>
        </column>
    </row>

    <!-- 底部的事件模块 -->
    <event>
        <search>
            <!-- 你的搜索逻辑 -->
        </search>
    </event>
</panel>

说明： #

• row用于创建横向行容器，内部的column会自动横向排列。
• 通过width属性可以调整两列的宽度比例（比如width="70%"和width="30%"），根据需求灵活设置。
• 这种方式无需额外CSS，兼容性更好，适配Splunk不同版本的仪表盘样式。

方案二：自定义CSS样式 #

如果需要更灵活的样式控制，可以通过自定义CSS修改元素的显示方式：

步骤1：添加CSS样式块 #

在仪表盘的<dashboard>标签内添加<style>块：

<dashboard>
    <style>
        /* 定位目标panel下的input和html模块容器 */
        #panel1 .dashboard-panel .input,
        #panel1 .dashboard-panel .html {
            display: inline-block;
            vertical-align: middle; /* 垂直居中对齐 */
            width: 48%; /* 调整宽度，留出间距 */
            margin-right: 2%;
        }
        /* 事件模块单独占一行 */
        #panel1 .dashboard-panel .event {
            display: block;
            clear: both;
            margin-top: 10px;
        }
    </style>

    <!-- 你的panel代码 -->
    <panel id="panel1">
        <input type="text" token="tk1" id="tk1id" searchWhenChanged="true">
            <label>Refine further?</label>
            <prefix> | where </prefix>
        </input>

        <html id="htmlid">
            <p>count: $job.resultCount$</p>
        </html>

        <event>
            <search>
                <!-- 你的搜索逻辑 -->
            </search>
        </event>
    </panel>
</dashboard>

说明： #

• 通过#panel1精准定位目标面板，避免影响其他面板的样式。
• display: inline-block让input和html模块横向排列，vertical-align: middle保证垂直方向对齐。
• clear: both确保事件模块不受前面横向元素的影响，单独占据一行。

注意事项 #

• 检查代码中的引号：原代码里searchWhenChanged=“true”使用了中文引号，需要改为英文双引号searchWhenChanged="true"，否则配置可能失效。
• 如果使用CSS方案，注意Splunk版本更新可能会改变默认的元素类名，若样式失效可通过浏览器开发者工具重新定位元素类。

内容的提问来源于stack exchange，提问作者Naveen K Reddy