这是一个JSFiddle:
这是我的目标截图:
我在浏览器中得到了什么:
关键区别在于,在实际实现中,条不填充包含 div 元素的可用宽度。如果我放置:width:100%
,栏会扩展到它的容器宽度,但会下降到文本下方;尽管两个元素都向左浮动。
有什么建议么?
这是一个JSFiddle:
这是我的目标截图:
我在浏览器中得到了什么:
关键区别在于,在实际实现中,条不填充包含 div 元素的可用宽度。如果我放置:width:100%
,栏会扩展到它的容器宽度,但会下降到文本下方;尽管两个元素都向左浮动。
有什么建议么?
这个解决方案应该有帮助:https ://stackoverflow.com/a/1767270/1472586
基本上从酒吧中删除float: left
和添加到它们。您可能还必须相应地调整边距(例如,标题上的右填充可能会更好)。width
overflow: hidden