Question

我无法弄清楚如何将此标题标题添加到顶部。我想要它填补顶部区域以及左侧和左侧。对。任何有CSS-superskills的人都可以帮忙吗？

请注意，我仍然希望将表值保留在中间，并且我想保留表填充。

＆＃13;

#search input{
    width: 100%;
}

#activities {
    top: 0;
    float: right;
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
    padding: 20px;
    margin: 2%;
    position: relative;
}
table {
    border-collapse: collapse;
    width: 100%;
}

＆＃13;

<div id="activities">
                    <h2 style="background:#0094ff;color:white;width: 100%;padding: 4px;position: relative;">Div Title</h2>
                    <form id="search">
                        <input name="query" placeholder="Search...">
                    </form>
                    <table>
                    <tbody>
                    <tr>
                        <td>
                            Fotboll 4v4
                        </td><td>
                            0.3 km
                        </td>
                    </tr><tr>
                        <td>
                            Brännboll
                        </td><td>
                            1.2 km
                        </td>
                    </tr><tr>
                        <td>
                            Badminton 2v2
                        </td><td>
                            1.5 km
                        </td>
                    </tr><tr>
                        <td>
                            Gruppmöte
                        </td><td>
                            2.2 km
                        </td>
                    </tr>
                    </tbody>
                </table>
                </div>

＆＃13;

或在此演示：https://jsfiddle.net/a2uqh6eu/

Answer 1

您的Div Title未将整个宽度事件设置为100％，为什么？由于您的容器使用了填充，填充是您的内容到边框的空间，看看此链接可能有所帮助：https://www.w3schools.com/css/css_boxmodel.asp

所以我从容器中删除了padding: 20px，并添加了一个类.content来包装你的内容并在那里添加填充：

.content {
  padding: 0 20px 20px; 20px
}

现在，使用margin-top: 0;的div标题的类将保持最高，width: 100%;现在可以使用容器的整个宽度。同时使用text-align: center;将文字居中。

.div-title {
  background: #0094ff;
  color: white;
  width: 100%;
  position: relative;
  text-align: center;
  margin-top: 0;
}

#search input {
  width: 100%;
}

#activities {
  top: 0;
  float: right;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
  position: relative;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.div-title {
  background: #0094ff;
  color: white;
  width: 100%;
  position: relative;
  text-align: center;
  margin-top: 0;
}

.content {
  padding: 0 20px 20px; 20px
}

<div id="activities">
  <h2 class="div-title">Div Title</h2>
  <div class="content">
  <form id="search">
    <input name="query" placeholder="Search...">
  </form>
  <table>
    <tbody>
      <tr>
        <td>
          Fotboll 4v4
        </td>
        <td>
          0.3 km
        </td>
      </tr>
      <tr>
        <td>
          Brännboll
        </td>
        <td>
          1.2 km
        </td>
      </tr>
      <tr>
        <td>
          Badminton 2v2
        </td>
        <td>
          1.5 km
        </td>
      </tr>
      <tr>
        <td>
          Gruppmöte
        </td>
        <td>
          2.2 km
        </td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

Answer 2

您可以在#activities上使用position: sticky属性。

请注意，all web browsers中没有实现。但是，对于那些不支持该属性的人，您可以使用this polyfill：https://github.com/filamentgroup/fixed-sticky。

希望能帮到你;）

Answer 3

使用位置：固定;在#activities div上

为了使表格保持在“中间”，您可能需要将其从#activities div中取出。

Answer 4

    int count = 0;

    ................
    ....................

    paymentCodeField.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            count++;
        }

        @Override
        public void afterTextChanged(Editable editable) {

            if (count == 4) {
                String str = editable.toString();
                str = str + " ";

                editText.setText(str);

                // Required to move cursor position after space
                editText.setSelection(str.length());

                count = 0;
            }
        }
    });

Answer 5

嗯...如果我理解正确，你希望你的DIV始终保持在页面顶部吗？

尝试将position: relative;更改为position: fixed;。这可能会实现你所需要的。

Answer 6

我想你要删除边距并填充body元素将其添加到css文件

body { padding:0;margin:0;}

或只是将位置绝对添加到activities和right:0

#activities { position:absolute;right:0;}

如何让标题标题保持最佳状态？

6 个答案: