我有一个用 CSS 设置样式的最小语法 XML,我希望能够有一个不同宽度的“下划线”或一个可见的 border-bottom
文本字段元素。
我尝试创建的视觉效果只是实际文档的预览。此处看到的 XML 被“编译”为具有更多数据的不同格式;目标是创建一个适用于这种“未翻译”格式的样式表,以便编辑器可以提供预览而无需实际构建最终产品。 它不需要交互。
目前实际的 XML 看起来像这样:
<textfield>Nature of the question/data needed</textfield>
非常小!在有人建议包装/添加元素之前,我做不到 - 这就是语法!
我尝试使用 :after
伪选择器在添加 content:"."后 float 元素; color:rgba(0,0,0,0);
但这似乎不是有效的作弊代码;它只在不可见文本下绘制边框。
也许我要求的东西是不可能的,但理想情况下我希望发生的是一个看起来像这样的 XML 元素:
<textfield>What is your name?</textfield>
看起来像这样:
What is your name? ______________________________________
除此之外,下划线空格的长度应始终在右侧的同一位置停止;行长度需要可变。
可以在这里找到我的 CSS 的缩短版本:http://jsfiddle.net/7GyVN/
这里还有相关的 CSS:
textfield {
float:left;
clear:both;
margin: .5em 0 .5em 2em;
width:80%;
}
textfield:after {
/*not really very good*/
content:".";
color:rgba(0, 0, 0, 0);
border-bottom:1px solid rgba(0, 0, 0, 1);
float:right;
}
这是否可以通过单个元素和伪选择器实现,或者我是否只需要振作起来编写脚本来简化此预览样式?
最佳答案
textfield {
white-space: nowrap; /* Force :after to stay at the same line */
overflow: hidden; /* Hide :after overflow */
}
textfield:after {
content: "";
display: inline-block;
width: 100%; /* Make it full-line (more than necessary) */
border-bottom: 1px solid #000;
}
关于css - 扩展宽度以填充元素 :after 上的 "float:right;",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22920029/