jQuery Mobile面板宽度
在新的jQuery mobile中有一个新的面板选项。 我实现了它并且它可以工作，但我想自定义面板的宽度。 标准宽度为272px，这对我的使用有点多。 我试过用过
.ui-panel{width:150px;} CSS选择器，但这只是调整面板的内容。 面板本身保持可见并保持相同的宽度。 使用firefox和chrome中的检查器我无法找到负责此面板的正确div。 任何人都可以帮我找到一种以正确的方式调整面板大小的方法吗？
我想到了！ 真的，这并不复杂。 我自己只是使用structure.css，但如果你正在使用其他CSS文件，可能还有更多要自定义。 无论如何…
使用您喜欢的编辑器，查找并替换“17em”并将其替换为您实际需要的值。 左侧面板采用造型设计，右侧面板采用造型设计。 我不会急于完成整个过程，因为在这里或那里可能存在一个不相关的“17em”。 它只需要一分钟……
这是一个简单的答案，但我对自己很满意：p
我自己也有同样的问题，并按照tylerl的建议用我需要的宽度替换17em。 哪个效果很好，除了我使用谷歌cdn加载CSS的事实，所以我无法直接更改它，一般来说我不是更改库代码的忠实粉丝。
所以玩了一下我想出了这个代码来重新定义默认的jquery mobile的css https://gist.github.com/geekdevs/5433246
您可以分别配置左侧和右侧边栏的宽度。 这是一个很少的代码，但只需用你需要的宽度替换@ left-sidebar-width和@ right-sidebar-width就可以使它适用于纯CSS。
他们在此演示中展示了如何更改面板宽度： http ： //jquerymobile.com/demos/1.3.0/docs/examples/panels/panel-styling.html
我不想对库css文件进行修改，所以我尝试了上面的补丁，但没有一个在jquery mobile 1.4.1上工作
我不得不添加一些样式来让它工作。
这是我修改过的CSS。 （分别用左右尺寸替换10em和15em）
.ui-panel { width: 10em; } .ui-panel.ui-panel-position-right { width: 15em; } .ui-panel.ui-panel-closed { width: 0; } .ui-panel-animate.ui-panel-position-left.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-left.ui-panel-display-push { -webkit-transform: translate3d(-10em, 0, 0); -moz-transform: translate3d(-10em, 0, 0); transform: translate3d(-10em, 0, 0) } .ui-panel-animate.ui-panel-position-right.ui-panel-display-overlay, .ui-panel-animate.ui-panel-position-right.ui-panel-display-push { -webkit-transform: translate3d(15em, 0, 0); -moz-transform: translate3d(15em, 0, 0); transform: translate3d(15em, 0, 0) } .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { -webkit-transform: translate3d(10em, 0, 0); -moz-transform: translate3d(10em, 0, 0); transform: translate3d(10em, 0, 0) } .ui-panel-animate.ui-panel-page-content-position-left{ -webkit-transform: translate3d(10em, 0, 0); -moz-transform: translate3d(10em, 0, 0); transform: translate3d(10em, 0, 0); } .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-right.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { -webkit-transform: translate3d(-15em, 0, 0); -moz-transform: translate3d(-15em, 0, 0); transform: translate3d(-15em, 0, 0) }
如果您不想全局编辑大小，请将其添加到自定义CSS中，在必要时添加ID，将23em更改为所需宽度：
注意：这仅适用于左侧。
.ui-panel { width: 23em; } .ui-panel-position-left { left: -23em; } /* positioning: content wrap, fixed toolbars and dismiss */ /* panel left open */ .ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open, .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open { left: 23em; right: -23em; } /* animated: panel left open (for reveal and push) */ .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push { -webkit-transform: translate3d(23em,0,0); -moz-transform: translate3d(23em,0,0); transform: translate3d(23em,0,0); }
我觉得你弄错了。 尝试
.ui-panel { width: 150px; }
或者，如果您发布内联，也许
当然，我和jquery一样新，我可能是错的。