如何关闭输入和跨度html元素之间的边缘？

Question

我遇到了一个与html元素有关的问题，该问题无法消除<input>和<span>元素之间的差距。如下面的屏幕截图所示（以红色框突出显示）。

我不确定<input>和<span>元素是否可以一起使用以实现下拉列表（如控件）-左侧的输入框，右侧的按钮-隐藏侧作为一个控件。

<span>元素的代码段，其中包装了<input>和<span>元素。

<span class="k-state-default">
                <input type="text" id="scheduler" placeholder="Click arrow to create schedule" class="k-input">
                <span class="k-select" id="btn-scheduler" onclick="showSchedulerPanel()" role="button">
                    <span class="k-icon k-i-clock"></span>
                </span>
            </span>

我在SO中找不到任何相关问题，如果您知道一个链接，请随时发表评论并将此问题标记为重复。

我摆了一个小提琴来说明这个问题。 https://jsfiddle.net/jun1uz/365bt4qp/4/

欢迎任何投入，建议或暴力反应。

Answer 1

我会同意

public class D : A {
    new public int MyProtected {
        get {return base.MyProtected;}
        set { base.MyProtected = value; }
    }
    new public int MyProtectedInternal {
        get { return base.MyProtectedInternal; }
        set { base.MyProtectedInternal = value; }
    }
}
public class C : Collection<D>
{
    C MyC { get; set; }
    C()
    {
        MyC[0].MyProtected++;
        MyC[0].MyInternal++;
        MyC[0].MyPublic++;
        MyC[0].MyProtectedInternal++;
    }
}