Question

我遇到了搜索表单的问题，使用的是我自己创建的代码。

问题是输入选择器正在与其标签重叠。

这显然是一个CSS问题，虽然我无法确定导致问题的具体样式。

以下HTML和CSS会复制此问题。

以下是在相关实际网站上发生的屏幕截图：

以下是特定HTML元素的代码段以及适用于它的CSS。

#LABEL_1 {
    background-position: 0px 0px;
    border-bottom-color: rgb(255, 255, 255);
    border-left-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-top-color: rgb(255, 255, 255);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    float: left;
    font-family: Arial, san-serif;
    font-size: 21px;
    height: 21px;
    line-height: 21px;
    list-style-type: none;
    margin-bottom: 5px;
    margin-right: 10px;
    max-width: 100%;
    min-height: 20px;
    outline-color: rgb(255, 255, 255);
    overflow-wrap: break-word;
    text-align: justify;
    text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 3px;
    text-size-adjust: 100%;
    width: 96.8906px;
    word-wrap: break-word;
    column-rule-color: rgb(255, 255, 255);
    -webkit-font-smoothing: antialiased;
    -webkit-locale: "en-US";
    perspective-origin: 48.4375px 10.5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-emphasis-color: rgb(255, 255, 255);
    -webkit-text-fill-color: rgb(255, 255, 255);
    -webkit-text-stroke-color: rgb(255, 255, 255);
    transform-origin: 48.4375px 10.5px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    border-top: 0px none rgb(255, 255, 255);
    border-right: 0px none rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    font: normal normal normal normal 21px / 21px Arial, san-serif;
    list-style: none outside none;
    margin: 0px 10px 5px 0px;
    outline: rgb(255, 255, 255) none 0px;
    -webkit-border-after: 0px none rgb(255, 255, 255);
    -webkit-border-before: 0px none rgb(255, 255, 255);
    -webkit-border-end: 0px none rgb(255, 255, 255);
    -webkit-border-start: 0px none rgb(255, 255, 255);
    -webkit-transform-origin: 48.4375px 10.5px;
}/*#LABEL_1*/

#INPUT_2 {
    background-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgb(1, 179, 224);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: rgb(1, 179, 224);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(1, 179, 224);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(1, 179, 224);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: none;
    border-top-width: 0px;
    bottom: -4px;
    color: rgb(1, 179, 224);
    display: block;
    font-family: Arial, san-serif;
    font-size: 21px;
    font-weight: bold;
    height: 30px;
    left: 1px;
    line-height: 21px;
    list-style-type: none;
    margin-right: 5px;
    outline-color: rgb(1, 179, 224);
    overflow-wrap: break-word;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: absolute;
    right: 1163.81px;
    text-size-adjust: 100%;
    top: 1px;
    width: 14px;
    word-wrap: break-word;
    -webkit-appearance: radio;
    column-rule-color: rgb(1, 179, 224);
    -webkit-font-smoothing: antialiased;
    -webkit-locale: "en-US";
    perspective-origin: 7px 15px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-emphasis-color: rgb(1, 179, 224);
    -webkit-text-fill-color: rgb(1, 179, 224);
    -webkit-text-stroke-color: rgb(1, 179, 224);
    transform-origin: 7px 15px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(1, 179, 224);
    border-top: 0px none rgb(1, 179, 224);
    border-right: 0px none rgb(1, 179, 224);
    border-bottom: 0px none rgb(1, 179, 224);
    border-left: 0px none rgb(1, 179, 224);
    border-width: 0px;
    border-color: rgb(1, 179, 224);
    border-style: none;
    border-radius: 3px 3px 3px 3px;
    font: normal normal bold normal 21px / 21px Arial, san-serif;
    list-style: none outside none;
    margin: 0px 5px 0px 0px;
    outline: rgb(1, 179, 224) none 0px;
    padding: 0px;
    -webkit-border-after: 0px none rgb(1, 179, 224);
    -webkit-border-before: 0px none rgb(1, 179, 224);
    -webkit-border-end: 0px none rgb(1, 179, 224);
    -webkit-border-start: 0px none rgb(1, 179, 224);
    -webkit-transform-origin: 7px 15px;
}/*#INPUT_2*/

<label for="round_trip" id="LABEL_1">
	<input type="radio" checked="checked" name="trip_type" id="INPUT_2" value="true" /> Round trip
</label>

请注意：该代码是使用名为SnappySnippet的which I discovered via a Stackoverflow question Chrome扩展程序生成的。它允许我选择一个HTML元素，然后拍摄与该元素相关的所有CSS和HTML的快照。这有很多CSS的趋势。我为可能导致的混乱道歉。

有人可以告知已填充的CSS导致此问题的哪个方面？

Answer 1

这里有一些过剩的，不必要的CSS。我不知道是什么生成了你的代码，但我通过删除尽可能多的不需要的东西来整理它，并通过删除单选按钮上的一些绝对定位来修复重叠。

#LABEL_1 {
  color: #fff;
  cursor: pointer;
  display: block;
  font-family: Arial, san-serif;
  font-size: 21px;
  height: 21px;
  line-height: 27px;
  text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
  margin: 0px 10px 5px 0px;
}

#INPUT_2 {
  height: 30px;
  outline-color: rgb(1, 179, 224);
  padding: 0;
  width: 14px;
  margin: 0px 8px 0px 0px;
  vertical-align: top;
}

<label for="round_trip" id="LABEL_1">
  <input type="radio" checked="checked" name="trip_type" id="INPUT_2" value="true" />Round trip
</label>

Answer 2

这是因为输入使用了// ConsoleApplication1.cpp : Defines the entry point for the console application. // #include "stdafx.h" #include <iostream> int main() { std::cout << "Hello world!" << std::endl; return 0; }，因此增加position: absolute上的左边距将解决该问题，从label更改为margin: 0px 10px 5px 0px;

此外，您的规则中还有许多不必要的属性

margin: 0px 10px 5px 20px;

#LABEL_1 {
    background-position: 0px 0px;
    border-bottom-color: rgb(255, 255, 255);
    border-left-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-top-color: rgb(255, 255, 255);
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    float: left;
    font-family: Arial, san-serif;
    font-size: 21px;
    height: 21px;
    line-height: 21px;
    list-style-type: none;
    margin-bottom: 5px;
    margin-right: 10px;
    max-width: 100%;
    min-height: 20px;
    outline-color: rgb(255, 255, 255);
    overflow-wrap: break-word;
    text-align: justify;
    text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 3px;
    text-size-adjust: 100%;
    width: 96.8906px;
    word-wrap: break-word;
    column-rule-color: rgb(255, 255, 255);
    -webkit-font-smoothing: antialiased;
    -webkit-locale: "en-US";
    perspective-origin: 48.4375px 10.5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-emphasis-color: rgb(255, 255, 255);
    -webkit-text-fill-color: rgb(255, 255, 255);
    -webkit-text-stroke-color: rgb(255, 255, 255);
    transform-origin: 48.4375px 10.5px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0px 0px / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    border-top: 0px none rgb(255, 255, 255);
    border-right: 0px none rgb(255, 255, 255);
    border-bottom: 0px none rgb(255, 255, 255);
    border-left: 0px none rgb(255, 255, 255);
    border-color: rgb(255, 255, 255);
    font: normal normal normal normal 21px / 21px Arial, san-serif;
    list-style: none outside none;
    margin: 0px 10px 5px 20px;
    outline: rgb(255, 255, 255) none 0px;
    -webkit-border-after: 0px none rgb(255, 255, 255);
    -webkit-border-before: 0px none rgb(255, 255, 255);
    -webkit-border-end: 0px none rgb(255, 255, 255);
    -webkit-border-start: 0px none rgb(255, 255, 255);
    -webkit-transform-origin: 48.4375px 10.5px;
}/*#LABEL_1*/

#INPUT_2 {
    background-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgb(1, 179, 224);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: none;
    border-bottom-width: 0px;
    border-left-color: rgb(1, 179, 224);
    border-left-style: none;
    border-left-width: 0px;
    border-right-color: rgb(1, 179, 224);
    border-right-style: none;
    border-right-width: 0px;
    border-top-color: rgb(1, 179, 224);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: none;
    border-top-width: 0px;
    bottom: -4px;
    color: rgb(1, 179, 224);
    display: block;
    font-family: Arial, san-serif;
    font-size: 21px;
    font-weight: bold;
    height: 30px;
    left: 1px;
    line-height: 21px;
    list-style-type: none;
    margin-right: 5px;
    outline-color: rgb(1, 179, 224);
    overflow-wrap: break-word;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    position: absolute;
    right: 1163.81px;
    text-size-adjust: 100%;
    top: 1px;
    width: 14px;
    word-wrap: break-word;
    -webkit-appearance: radio;
    column-rule-color: rgb(1, 179, 224);
    -webkit-font-smoothing: antialiased;
    -webkit-locale: "en-US";
    perspective-origin: 7px 15px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-text-emphasis-color: rgb(1, 179, 224);
    -webkit-text-fill-color: rgb(1, 179, 224);
    -webkit-text-stroke-color: rgb(1, 179, 224);
    transform-origin: 7px 15px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(1, 179, 224);
    border-top: 0px none rgb(1, 179, 224);
    border-right: 0px none rgb(1, 179, 224);
    border-bottom: 0px none rgb(1, 179, 224);
    border-left: 0px none rgb(1, 179, 224);
    border-width: 0px;
    border-color: rgb(1, 179, 224);
    border-style: none;
    border-radius: 3px 3px 3px 3px;
    font: normal normal bold normal 21px / 21px Arial, san-serif;
    list-style: none outside none;
    margin: 0px 5px 0px 0px;
    outline: rgb(1, 179, 224) none 0px;
    padding: 0px;
    -webkit-border-after: 0px none rgb(1, 179, 224);
    -webkit-border-before: 0px none rgb(1, 179, 224);
    -webkit-border-end: 0px none rgb(1, 179, 224);
    -webkit-border-start: 0px none rgb(1, 179, 224);
    -webkit-transform-origin: 7px 15px;
}/*#INPUT_2*/

Answer 3

将＃Label_1设为{{ request.POST.txtNumBins }}，您还需要扩展宽度。我不确定为什么每一个属性都是这样定义的，但是如果那就是你想要的那么你就有了一个好的属性。

是什么导致此输入选择器及其标签重叠？

3 个答案: