我正在努力实现这个结果:
但我在定位方面遇到了很多麻烦。特别是顶部的输入框和按钮看起来好像是连接的,特别是很难定位。我最终正确地定位它然而我必须使用绝对定位,这对其余的布局产生了一些不良影响。
这是我到目前为止所做的:
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;
}
你可以看到它有一些问题。我觉得我已经完全错了,而且我缺少一些基本的东西。
有关最好/更好的方法的任何想法吗?
答案 0 :(得分:0)
像这样更改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;
}
然后根据需要修改为yes / no添加已检查状态。 See fiddle here