Question

如何制作带有一定间距的边框，以便可以插入任意文本（无需对背景颜色/图像进行硬编码）。也无需更改HTML

到目前为止我的尝试

https://codepen.io/anon/pen/ZZVMBx#anon-login

    $primary-color: blue;
    $border-color: blue;
    $base-font-size: 16px;

    label {
      position: relative;
      span {
        position: absolute;
        display: block;
        color: $border-color;
        left: 10px;
        right: 0;
        top: -8px;
        font-size: 14px;
      }
      input {
        position: absolute;
        border: 2px solid $border-color;
        border-radius: 4px;
        padding: 8px;
        z-index: -1;
        font-size: $base-font-size;
      }
    }

      <label>
        <span>label</span>
        <input type="text" value="hello">
      </label>

类似于Text in Border CSS HTML，除了我已指出我不希望更改背景。接受的答案和提供的答案将背景设置为白色。

Answer 1

只需为您的跨度添加填充和背景，它将起作用

 (_9787:Device {model: 'ASR1000', name: 'mxxx103', scanned: 'Yes'})
    (_9788:Device {model: 'ASR1000', name: 'lxxx100', scanned: 'Yes'})
    (_9789:Device {model: 'ASR1000', name: 'mxxx100', scanned: 'Yes'})
    (_9790:Device {model: 'ASR1000', name: 'txxx100', scanned: 'Yes'})
    (_9791:Device {model: 'ASR1000', name: 'mxxx101', scanned: 'Yes'})
    (_9792:Device {model: 'ASR1000', name: 'mxxx102', scanned: 'Yes'})
    (_9793:Device {model: 'ASR1000', name: 'txxx101', scanned: 'Yes'})
    (_9794:Device {model: 'ASR1000', name: 'lxxx101', scanned: 'Yes'})
    (_9795:Device {model: 'ASR1000', name: 'cxxx100', scanned: 'Yes'})
    (_9796:Device {model: 'ASR1000', name: 'cxxx101', scanned: 'Yes'})
    (_9797:Device {capabilities: 'R S I', model: 'WS-C4500X', name: 'mxxxcvss01'})
    <py2neo.matching.NodeMatch object at 0x02CCB870>
    <py2neo.matching.NodeMatch object at 0x02CCBCD0>
    ---------------------------------------------------------------------------
    ValueError                                Traceback (most recent call last)
    <ipython-input-135-653e282922e7> in <module>
          7 node2=matcher.match(name='mxxxcvss01')
          8 print(node2)
    ----> 9 for rel in db.relationships.match((node1,node2)):
         10     print (rel)

    C:\Utils\WPy3.6 -32-Qt5\python-3.6.7\lib\site-packages\py2neo\matching.py in __iter__(self)
        266         """ Iterate through all matching relationships.
        267         """
    --> 268         query, parameters = self._query_and_parameters()
        269         for record in self.graph.run(query, parameters):
        270             yield record[0]

    C:\Utils\WPy3.6 -32-Qt5\python-3.6.7\lib\site-packages\py2neo\matching.py in _query_and_parameters(self, count)
        311             if len(self._nodes) >= 1 and self._nodes[0] is not None:
        312                 start_node = Node.cast(self._nodes[0])
    --> 313                 verify_node(start_node)
        314                 clauses.append("MATCH (a) WHERE id(a) = {x}")
        315                 parameters["x"] = start_node.identity

    C:\Utils\WPy3.6 -32-Qt5\python-3.6.7\lib\site-packages\py2neo\matching.py in verify_node(n)
        288         def verify_node(n):
        289             if n.graph != self.graph:
    --> 290                 raise ValueError("Node %r does not belong to this graph" % n)
        291             if n.identity is None:
        292                 raise ValueError("Node %r is not bound to a graph" % n)

    ValueError: Node ({model: 'ASR1000', name: 'mxxx103', scanned: 'Yes'}) does not belong to this graph

    background:white;
    padding-left: 10px;
    padding-right: 40px;

label {
	 position: relative;
}
 label span {
	 position: absolute;
	 display: block;
	 color: blue;
	 left: 10px;
	 right: 0;
	 top: 8px;
	 font-size: 14px;
	 background: white;
	 padding-left: 10px;
	 padding-right: 40px;
}
 label input {
	 position: absolute;
	 border: 2px solid blue;
	 border-radius: 4px;
	 top: 15px;
	 padding: 8px;
	 z-index: -1;
	 font-size: 16px;
}

check your updated codepen here

Answer 2

<form>
 <fieldset>
  <legend>Label</legend>
  <input type="text">
 </fieldset>
</form>

您可能对fieldset感兴趣。看看。

根据需要自定义CSS。

带文字间距的CSS边框

2 个答案: