Question

我正在尝试创建3列文本输入。最初，这种方法工作正常，但是当您在上面添加另一个元素时，格式会中断。

请注意，由于CMS生成的html，我无法控制它。

我希望在3列中使用的元素的类名称为'div_short-text'。

您可以从下面的屏幕截图中看到当我引入一个新元素时会发生什么。我知道此问题是因为我在列表项上使用了第n个孩子，但不确定如何解决。

我希望div_short-text的每个第3个实例的右边距为零。

fieldset {
  background-color: #ececec;
  margin-bottom: 1em;
}

ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none
}

.short-text,
.long-text {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #444;
  padding: 10px;
  margin: 0 0 15px 0;
}

.div_short-text {
  width: 31%;
  float: left;
  margin-right: 24px;
}

li li:nth-child(3n+0) .div_short-text {
  margin-right: 0;
}


/* Clear on the 4,7,10 etc elements */

li li:nth-child(3n + 1) .div_short-text {
  clear: both;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb">

<head>
  <title>Medium</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <link href="style.css" rel="stylesheet" type="text/css" title="default" />
</head>

<body>
  <form action='' method='post'>
    <div>
      <ol>
        <li>
          <fieldset>
            <legend><span>3 Col</span></legend>
            <ol>
              <li>
                <div class='field_text div_short-text'>
                  <input type="text" value="First name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='field_text div_short-text'>
                  <input type="text" value="Middle name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='field_text div_short-text'>
                  <input type="text" value="Last name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="First name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="Middle name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="Last name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="First name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div id='EXAMPLEINPUTS_FIELD79_OUTERDIV' class='div_short-text'>
                  <input type="text" value="Middle name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div id='EXAMPLEINPUTS_FIELD33_OUTERDIV' class='div_short-text'>
                  <input type="text" value="Last name" maxlength='255' class="short-text" />
                </div>
              </li>
            </ol>
          </fieldset>
        </li>



        <li>
          <fieldset>
            <legend><span>3 Col</span></legend>
            <ol>
              <li>
                <div class='field_text div_long-text'>
                  <input type="text" value="Loooooooooooooooooooong" maxlength='255' class="long-text" />
                </div>
              </li>
              <li>
                <div class='field_text div_short-text'>
                  <input type="text" value="First name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='field_text div_short-text'>
                  <input type="text" value="Middle name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='field_text div_short-text'>
                  <input type="text" value="Last name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="First name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="Middle name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="Last name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="First name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="Middle name" maxlength='255' class="short-text" />
                </div>
              </li>
              <li>
                <div class='div_short-text'>
                  <input type="text" value="Last name" maxlength='255' class="short-text" />
                </div>
              </li>
            </ol>
          </fieldset>
        </li>
      </ol>
  </form>
</body>

</html>

谢谢

CSS专栏第n个子问题

0 个答案: