实现布局CSS HTML定位问题的最佳方法

我正在努力实现这个结果：

但我在定位东西时遇到了很多麻烦。尤其是输入框和顶部的按钮，看起来好像它们是连接在一起的，这尤其是很难定位。我最终正确地定位了它，但是我不得不使用绝对定位，这对布局的其余部分产生了一些不良影响

以下是我迄今为止所做的工作：

HTML

正如你所看到的，它有一些问题。我觉得我在这件事上做错了，我缺少了一些基本的东西

---

有没有关于实现这一点的最佳/更好方法的想法？

如下更改您的HTML：

<div class="main">
    <div class="logo">
            <h1>Shopping<span class="orange">List</span></h1>

    </div>
    <div class="add-wrapper">
        <div class="add add-input">
            <input type="text" placeholder="Add Items" />
            <button type="submit">Add</button>
        </div>
        <div class="add add-btn"></div>
    </div>
    <div class="list-wrapper">
        <ul>
            <li class="item">
                    <h3>Bread</h3>

                <div class="yesno">
                    <div class="nolike"></div>
                    <div class="yeslike"></div>
                </div>
            </li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
    </div>
</div>

/*--------BASIC TEXT STYLES--------*/
 body {
    background-color: #ECF0F1;
}
p, h1, h2, h3, h4, h5, h6, input, button {
    font-family:'Lato', sans-serif;
    color: #1ABC9C;
}
h1 {
    font-size: 4em;
}
h2 {
    font-size: 2.8em;
}
h3 {
    font-size: 1.9em;
    padding:0;
    margin:0 5px;
}
h4 {
    font-size: 1.4em;
}
p {
    font-size: 1em;
}
.orange {
    color: #F39C12;
}
.white {
    color: #ECF0F1;
}
/*--------END BASIC TEXT STYLES--------*/

/*--------MAIN STYLING--------*/

/* apply a natural box layout model to all elements, but allowing components to change */
 html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.main {
    margin: auto;
    width: 600px;
    margin-top: 50px;
    text-align: center;
}
.logo {
    text-align: center;
}
.add-wrapper {
    margin-top: 35px;
    position: relative;
}
.add {
    position: relative;
}
.add-input > input {
    height: 60px;
    border: 4px solid #1ABC9C;
    border-right: none;
    background-color: transparent;
    outline: none;
    padding-left: 10px;
    font-size: 1.9em;
    width: 100%;
}
button {
    border: none;
    outline: none;
    background-color: #1ABC9C;
    color: #ECF0F1;
    height: 60px;
    width: 60px;
    cursor: pointer;
    position:absolute;
    right:0;
    top:0;
}
button:hover {
    background-color: #01A383;
}
.add-btn {
}
.list-wrapper ul {
    padding:0;
    margin:0;
}
.item {
    position:relative;
    height: 60px;
    border: 4px solid #1ABC9C;
    background-color: transparent;
    outline: none;
    padding-left: 10px;
    background-color: #DEE4E8;
    text-align: left;
    line-height: 60px;
    list-style-type:none;
    padding:0;
    margin:10px 0;
}
.yesno {
    width:120px;
    height:60px;
    position:absolute;
    right:-4px;
    top:-4px;
}
.nolike {
    width:60px;
    height:60px;
    float:right;
    background:orange;
}
.yeslike {
    width:60px;
    height:60px;
    float:right;
    background:#1ABC9C;
}
.yeslike:target {
    content:'A';
    color:#fff;
}

---

然后根据需要修改，添加“是/否”的选中状态。

这在JSFIDLE中似乎可以正常工作，但在浏览器中测试时却不行……可能与reset.css有关？

<div class="main">
    <div class="logo">
            <h1>Shopping<span class="orange">List</span></h1>

    </div>
    <div class="add-wrapper">
        <div class="add add-input">
            <input type="text" placeholder="Add Items" />
            <button type="submit">Add</button>
        </div>
        <div class="add add-btn"></div>
    </div>
    <div class="list-wrapper">
        <ul>
            <li class="item">
                    <h3>Bread</h3>

                <div class="yesno">
                    <div class="nolike"></div>
                    <div class="yeslike"></div>
                </div>
            </li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
    </div>
</div>

/*--------BASIC TEXT STYLES--------*/
 body {
    background-color: #ECF0F1;
}
p, h1, h2, h3, h4, h5, h6, input, button {
    font-family:'Lato', sans-serif;
    color: #1ABC9C;
}
h1 {
    font-size: 4em;
}
h2 {
    font-size: 2.8em;
}
h3 {
    font-size: 1.9em;
    padding:0;
    margin:0 5px;
}
h4 {
    font-size: 1.4em;
}
p {
    font-size: 1em;
}
.orange {
    color: #F39C12;
}
.white {
    color: #ECF0F1;
}
/*--------END BASIC TEXT STYLES--------*/

/*--------MAIN STYLING--------*/

/* apply a natural box layout model to all elements, but allowing components to change */
 html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.main {
    margin: auto;
    width: 600px;
    margin-top: 50px;
    text-align: center;
}
.logo {
    text-align: center;
}
.add-wrapper {
    margin-top: 35px;
    position: relative;
}
.add {
    position: relative;
}
.add-input > input {
    height: 60px;
    border: 4px solid #1ABC9C;
    border-right: none;
    background-color: transparent;
    outline: none;
    padding-left: 10px;
    font-size: 1.9em;
    width: 100%;
}
button {
    border: none;
    outline: none;
    background-color: #1ABC9C;
    color: #ECF0F1;
    height: 60px;
    width: 60px;
    cursor: pointer;
    position:absolute;
    right:0;
    top:0;
}
button:hover {
    background-color: #01A383;
}
.add-btn {
}
.list-wrapper ul {
    padding:0;
    margin:0;
}
.item {
    position:relative;
    height: 60px;
    border: 4px solid #1ABC9C;
    background-color: transparent;
    outline: none;
    padding-left: 10px;
    background-color: #DEE4E8;
    text-align: left;
    line-height: 60px;
    list-style-type:none;
    padding:0;
    margin:10px 0;
}
.yesno {
    width:120px;
    height:60px;
    position:absolute;
    right:-4px;
    top:-4px;
}
.nolike {
    width:60px;
    height:60px;
    float:right;
    background:orange;
}
.yeslike {
    width:60px;
    height:60px;
    float:right;
    background:#1ABC9C;
}
.yeslike:target {
    content:'A';
    color:#fff;
}