Question

我想取消彩色文字EXAMPLE旁边的边框。我试图设置border: none，但它不起作用。这是一些解决方法吗？这是我的代码：

div.example {
  font-size: 1em;
  /*letter-spacing: 0.05em;
	line-height: 1.5em;*/
  border: 0px;
  border-left: 4px solid #64c6ed;
  padding: 5px 5px 5px 8px;
  margin-bottom: 15px;
}

div.example::before {
  content: 'Example';
  color: #64c6ed;
  font-weight: bold;
  text-transform: uppercase;
  /*line-height: 1em;
	letter-spacing: 0.3em;*/
  border: 0px none !important;
}

<div class="example">
  <p>Popis položek, který je uveden u mzdových listů souhrnných (MLS), může vypadat např. takto:<br />&#160;
    <table class="B1-P4">
      <tr>
        <th class="seda">Název</th>
        <th class="seda">Popis </th>
      </tr>
      <tr>
        <td class="seda">SP základ celkem<br /><span class="FieldName">S_SocialInsBase</span></td>
        <td class="seda">Počítaná položka. Celkový základ SP vypočtený ze základů SP pro jednotlivé prac. poměry daného zaměstnance <i>(MLD:S_SocialInsBaseCorrect)</i>......atd.</td>
      </tr>
    </table>
    <p>Tj. na nějakém vstupním formuláři souhrnného mzdového listu je položka "SP základ celkem". V programu je definována pod názvem <i>S_SocialInsBase</i> (a pod tímto názvem ji lze i vyhledat v programu i v helpu). Popis se odkazuje na položku dílčího
      mzdového listu "Základ SP" <i>(S_SocialInsBaseCorrect)</i>. Jelikož se jedná o položku jiné agendy (jiného Business objektu), je uvedena i její zkratka, aby nedošlo k záměně, tj. <i>(MLD:S_SocialInsBaseCorrect)</i>.</p>
</div>

Answer 1

边框是.example div的一部分，您无法通过更改伪元素来删除。您可以使用::before：

将position: absolute元素放在div之外

div.example {
  position: relative;
  font-size: 1em;
  /*letter-spacing: 0.05em;
	line-height: 1.5em;*/
  border: 0px;
  border-left: 4px solid #64c6ed;
  padding: 0 5px 5px 8px;
  margin: 25px 0 15px;
}

div.example::before {
  position: absolute;
  top: -20px;
  content: 'Example';
  color: #64c6ed;
  font-weight: bold;
  text-transform: uppercase;
  /*line-height: 1em;
	letter-spacing: 0.3em;*/
  border: 0px none !important;
}

<div class="example">
  <p>Popis položek, který je uveden u mzdových listů souhrnných (MLS), může vypadat např. takto:
    <br />&#160;
    <table class="B1-P4">
      <tr>
        <th class="seda">Název</th>
        <th class="seda">Popis </th>
      </tr>
      <tr>
        <td class="seda">SP základ celkem
          <br /><span class="FieldName">S_SocialInsBase</span></td>
        <td class="seda">Počítaná položka. Celkový základ SP vypočtený ze základů SP pro jednotlivé prac. poměry daného zaměstnance <i>(MLD:S_SocialInsBaseCorrect)</i>......atd.</td>
      </tr>
    </table>
    <p>Tj. na nějakém vstupním formuláři souhrnného mzdového listu je položka "SP základ celkem". V programu je definována pod názvem <i>S_SocialInsBase</i> (a pod tímto názvem ji lze i vyhledat v programu i v helpu). Popis se odkazuje na položku dílčího
      mzdového listu "Základ SP" <i>(S_SocialInsBaseCorrect)</i>. Jelikož se jedná o položku jiné agendy (jiného Business objektu), je uvedena i její zkratka, aby nedošlo k záměně, tj. <i>(MLD:S_SocialInsBaseCorrect)</i>.</p>
</div>

Answer 2

我尝试添加position:absolute，使其移出有边框的div。

div.example
{
    font-size: 1em;
    border: 0px;
    border-left: 4px solid #64c6ed;
    padding: 5px 5px 5px 8px;
    margin-bottom: 15px;
    margin-top: 40px;
    position: relative;
}

div.example::before
{
    content: 'Example';
    color: #64c6ed;
    font-weight: bold;
    text-transform: uppercase;
    border: 0px none !important;
    position: absolute;
    bottom: 100%;
    left: 0;
}

<div class="example">
                                                    <p>Popis položek, který je uveden u mzdových listů souhrnných (MLS), může vypadat např. takto:<br />&#160;<table class="B1-P4"><tr><th class="seda">Název</th><th class="seda">Popis </th></tr><tr><td class="seda">SP základ celkem<br /><span class="FieldName">S_SocialInsBase</span></td><td class="seda">Počítaná položka. Celkový základ SP vypočtený ze základů SP pro jednotlivé prac. poměry daného zaměstnance <i>(MLD:S_SocialInsBaseCorrect)</i>......atd.</td></tr></table><p>Tj. na nějakém vstupním formuláři souhrnného mzdového listu je položka "SP základ celkem". V programu je definována pod názvem <i>S_SocialInsBase</i> (a pod tímto názvem ji lze i vyhledat v programu i v helpu). Popis se odkazuje na položku dílčího mzdového listu "Základ SP" <i>(S_SocialInsBaseCorrect)</i>. Jelikož se jedná o položku jiné agendy (jiného Business objektu), je uvedena i její zkratka, aby nedošlo k záměně, tj. <i>(MLD:S_SocialInsBaseCorrect)</i>.</p>
                                                </div>

Answer 3

您需要将文本放在.example类之外。

请查看以下内容

div.example
{
	font-size: 1em;
	/*letter-spacing: 0.05em;
	line-height: 1.5em;*/
	border: 0px;
	border-left: 4px solid #64c6ed;
	padding: 5px 5px 5px 8px;
	margin-bottom: 15px;
}

h3
{
	color: #64c6ed;
	font-weight: bold;
	text-transform: uppercase;
	/*line-height: 1em;
	letter-spacing: 0.3em;*/
  margin-left: 20px;
}

<h3>EXAMPLE</h3>
<div class="example">
  <p>Popis položek, který je uveden u mzdových listů souhrnných (MLS), může vypadat např. takto:<br />&#160;<table class="B1-P4"><tr><th class="seda">Název</th><th class="seda">Popis </th></tr><tr><td class="seda">SP základ celkem<br /><span class="FieldName">S_SocialInsBase</span></td><td class="seda">Počítaná položka. Celkový základ SP vypočtený ze základů SP pro jednotlivé prac. poměry daného zaměstnance <i>(MLD:S_SocialInsBaseCorrect)</i>......atd.</td></tr></table><p>Tj. na nějakém vstupním formuláři souhrnného mzdového listu je položka "SP základ celkem". V programu je definována pod názvem <i>S_SocialInsBase</i> (a pod tímto názvem ji lze i vyhledat v programu i v helpu). Popis se odkazuje na položku dílčího mzdového listu "Základ SP" <i>(S_SocialInsBaseCorrect)</i>. Jelikož se jedná o položku jiné agendy (jiného Business objektu), je uvedena i její zkratka, aby nedošlo k záměně, tj. <i>(MLD:S_SocialInsBaseCorrect)</i>.</p>
</div>

：在没有边框的内容之前

3 个答案: