调整 Google Cast 按钮的大小和样式 <google-cast-launcher>

Question

我有一个简单的页面，我正在其中加载 Cast 应用程序框架：

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

此页面遵循 标准投射按钮示例：

<google-cast-launcher></google-cast-launcher>

默认情况下，这个按钮很大，占据了页面上的所有空间。所以，我尝试用 CSS 调整它的大小：

google-cast-launcher {
  max-width: 2em;
}

这没有效果。设置显式

height

和

width

也不起作用。

文档没有帮助：

您可以根据需要对元素应用任何其他样式，例如大小或位置。

如何设置此按钮的样式？

Answer 1

这对我来说效果很好。请看下面，谢谢。

google-cast-launcher {

 float: right;

 margin: 10px 6px 14px 0px;

 width: 40px;

 height: 32px;

 opacity: 0.7;

 background-color: #000;

 border: none;

 outline: none;

}
 
google-cast-launcher:hover {

 --disconnected-color: white;

 --connected-color: white;

}

Answer 2

该元素默认设置为

display: inline

- 这些元素没有可用的宽度或高度属性。将其设置为

display: inline-block

或

display: block

。