整洁的内容--不同的小部件或css的变化?

时间:2013-05-22 作者:Richard

我想整理一下小部件中的内容。我不确定我是否应该使用不同的小部件,或者对CSS进行更改,或者其他什么。。。

在该网站的大屏幕上:http://richardclunan.com/

…右侧是“来自收件箱”部分,这是一个文本小部件。

在较大的屏幕上,文本行看起来太长。我想使行长度短于它们上面的文本字段。

(在一个较小的屏幕上,小部件会弹出到网站的底部,并且行比上面的文本字段短——这样看起来更整洁。)

有没有其他小部件可以用来整理它?或者我需要对此进行CSS更改吗?

1 个回复
SO网友:Burgon

您可以将以下内容添加到CSS中:

div.textwidget {
    max-width: 250px;
}
您可能希望确保这高于您的媒体查询规则,以便它不会影响较小屏幕上页面的格式。

我使用Chrome的开发者控制台来找出文本输入的宽度,并找到您想要更改的小部件的类别。您可以了解更多Chrome DevTools here.

结束

相关推荐

Using tabs in admin widgets

更新:我应该指出,我在插件/主题选项页面上测试了下面的方法,效果非常好。事实上,我还能够包括jQuery cookie插件,以保留页面加载之间的当前选项卡选择(很好!)。当您有多个小部件选项时,尝试向管理小部件添加选项卡以减少表单占用空间。我正在使用WordPress附带的jQuery UI选项卡。以下是我迄今为止在插件中编写的代码。http://pastebin.com/fe4wdBcp当小部件被拖动到小部件区域时,选项卡似乎呈现为OK,但您无法单击查看第二个选项卡。更糟糕的是,如果刷新窗口小部件页面,