Chrome扩展推送通知按钮样式设置：实现横向并排显示

嘿，我来帮你搞定推送通知里按钮横向并排的问题！不同的实现方式处理方法不一样，我给你分几种常见场景说说：

这是最容易调整的情况，直接用CSS布局就能搞定。假设你的通知结构大概是这样：

<div class="notification">
  <p>你的通知内容...</p>
  <div class="notification-actions">
    <button class="action-btn">Know more</button>
    <button class="action-btn">Close</button>
  </div>
</div>

你只需要给按钮容器加个Flex布局（推荐），或者让按钮变成行内块元素：

/* 方法1：Flex布局，灵活控制间距 */
.notification-actions {
  display: flex;
  gap: 12px; /* 按钮之间的间距，可按需调整 */
  margin-top: 10px;
}

/* 方法2：行内块元素实现 */
.action-btn {
  display: inline-block;
  margin-right: 12px;
}

这样两个按钮就会横向并排，还能自由调整间距和样式。

Android系统默认会把通知按钮垂直排列，要改成横向的话，需要自定义通知布局：

• 先创建一个自定义布局文件（比如notification_custom_layout.xml），用横向的LinearLayout包裹按钮：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:gap="8dp">

    <Button
        android:id="@+id/btn_know_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Know more"/>

    <Button
        android:id="@+id/btn_close"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Close"/>
</LinearLayout>

• 然后在代码里用RemoteViews加载这个布局，设置到通知中，还要给按钮绑定点击事件：

// 加载自定义布局
RemoteViews customView = new RemoteViews(getPackageName(), R.layout.notification_custom_layout);

// 构建通知
NotificationCompat.Builder builder = new NotificationCompat.Builder(this, YOUR_CHANNEL_ID)
        .setSmallIcon(R.drawable.ic_notification)
        .setContentTitle("通知标题")
        .setContentText("通知内容")
        .setCustomContentView(customView)
        .setPriority(NotificationCompat.PRIORITY_DEFAULT);

// 给Know more按钮设置点击事件
Intent knowMoreIntent = new Intent(this, TargetActivity.class);
PendingIntent knowMorePendingIntent = PendingIntent.getActivity(this, 0, knowMoreIntent, PendingIntent.FLAG_IMMUTABLE);
customView.setOnClickPendingIntent(R.id.btn_know_more, knowMorePendingIntent);

// 给Close按钮设置点击事件（比如广播关闭通知）
Intent closeIntent = new Intent(this, NotificationCloseReceiver.class);
closeIntent.setAction("ACTION_CLOSE_NOTIFICATION");
PendingIntent closePendingIntent = PendingIntent.getBroadcast(this, 1, closeIntent, PendingIntent.FLAG_IMMUTABLE);
customView.setOnClickPendingIntent(R.id.btn_close, closePendingIntent);

// 显示通知
NotificationManagerCompat notificationManager = NotificationManagerCompat.from(this);
notificationManager.notify(NOTIFICATION_ID, builder.build());

这样自定义布局的通知按钮就会横向排列啦。

这里要注意：Web系统推送的按钮布局是由浏览器决定的，大部分浏览器默认会垂直排列按钮，而且我们没法直接修改系统通知的样式。不过如果你的通知只有2个按钮，在宽屏设备上部分浏览器（比如Chrome）会自动把它们横向排列。如果一定要强制横向，建议改用页面内模拟通知（自己用HTML/CSS写通知组件，而非调用浏览器的Notification API），这样就能完全控制样式了。

内容的提问来源于stack exchange，提问作者Kshama Jain