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

Question

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

http://imgur.com/qQ80rOr

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

这是我到目前为止所做的：

http://jsfiddle.net/1pw4mLba/

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">
        </div>

        <div class="add add-btn">
            <button type="submit">Add</button>
        </div>

    </div>

    <div class="list-wrapper">
        <ol>
                <li class="item">
                    <h3>Bread</h3>

                </li>

                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
                <li class="item"></li>
            </ol>   
    </div>
</div>

CSS

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: absolute;
}

.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: 540px;
}

.add-btn > button {
    border: none;
    outline: none;
    background-color: #1ABC9C;
    color: #ECF0F1;
    height: 60px;
    width: 60px;
    cursor: pointer;
}

.add-btn>button:hover {
    background-color: #01A383;
}

.add-btn {
    left: 540px;
}



.item {
    margin-top: 10px;
    width: 100%;
    height: 60px;
    background-color: #DEE4E8;
    text-align: left;
    line-height: 60px;
    padding-left: 10px;

}

如您所见，它存在一些问题。我觉得我做错了这一切，而且我缺少一些基本的东西。

对实现这一目标的最佳/更好方法有什么想法吗？

Answer 1

像这样更改您的 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>

你的 CSS 是这样的：

/*--------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;
}

然后根据需要进行修改，添加是/否的选中状态。 See fiddle here