我想在 Polymer 中的容器元素中设置某些元素的宽度，但无法按预期工作。这是一些小例子:
<!doctype html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-container">
<template>
<paper-input label="Test"></paper-input>
</template>
<script>
class MyContainer extends Polymer.Element {
static get is() {
return 'my-container';
}
}
customElements.define(MyContainer.is, MyContainer);
</script>
</dom-module>
<dom-module id="my-element">
<template>
<style>
#pblock {
width: 50%;
}
</style>
<my-container id="pblock"></my-container>
</template>
<script>
HTMLImports.whenReady(function() {
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>我将容器设置为 50% 宽度。由于该容器内的纸张输入宽度设置为 100%，我认为它考虑了其父级的 100%，即文档的 50%。 但是，纸张输入占用整个宽度，不会对容器的 50% 使用react。如何设置容器的宽度(或高度)，以便内部元素(在本例中为纸张输入)将其用作百分比引用？
感谢您的帮助!
最佳答案
width: 50%; 没有反射(reflect)，因为你的 container 有 display: inline 把它改成 display: block
如果你想让它居中对齐，给 margin-left:auto;右边距:自动
<!doctype html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-container">
<template>
<paper-input label="Test"></paper-input>
</template>
<script>
class MyContainer extends Polymer.Element {
static get is() {
return 'my-container';
}
}
customElements.define(MyContainer.is, MyContainer);
</script>
</dom-module>
<dom-module id="my-element">
<template>
<style>
#pblock {
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<my-container id="pblock"></my-container>
</template>
<script>
HTMLImports.whenReady(function() {
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>关于css - 在 Polymer 中设置样式时考虑 parent 的宽度/高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46364534/