設計地圖彈出的CSS

Question

框現在我的CSS：

#setlocation { 
    position:absolute; 
    width:420px; 
    height:125px; 
    z-index:1; 
    left: 75px; 
    top: 0px; 
    background-color: #FFF; 
    border-color: #000; 
    } 

任何幫助將高度讚賞。

Answer 1

它會幫助你。它更少的HTML（更清晰）和更少的CSS。表是不好的事情（這只是一個例子）：FIDDLE

.setlocation-ok * { 
    box-sizing: border-box; 
    -o-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.setlocation-ok { 
    width: 70%; 
    margin: 0 auto; 
    padding: 20px; 
    color: #aeaeae; 
    background: #FFF; 
    margin-bottom: 30px; 
    position:relative; 
} 
.setlocation-ok:before { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    border-bottom: 15px solid #fff; 
    position: absolute; 
    left: 50%; 
    top: -14px; 
    transform: translateX(-50%); 
} 
.setlocation-ok .close { 
    display: inline-block; 
    color: #fff; 
    background: #d1d1d1; 
    width: 15px; 
    height: 15px; 
    text-align: center; 
    line-height: 15px; 
    border-radius: 50%; 
    position: absolute; 
    right: 10px; 
    top: 10px; 
} 
.setlocation-ok .close:hover { 
    background: #c1c1c1; 
    cursor: pointer; 
} 
.setlocation-ok label { 
    display: block; 
    margin-bottom: 5px; 
    color: #2782a3; 
} 
.setlocation-ok input[type=text] { 
display: block; 
    padding: 5px 10px; 
    width: 100%; 
    margin-bottom: 5px; 
} 
.setlocation-ok input[type=submit] { 
    border: none; 
    background: #2782a3; 
    color: white; 
    padding: 5px 10px; 
} 

和HTML：

<div style="padding: 50px; background: #ccc;"> 
    <div class="setlocation-ok"> 
    <form action="/maps/jmap160_netv1.asp?action=4" method="post" name="30"> 
     <label>Enter your address</label> 
     <input name="location" type="text" placeholder="Example: 123 Lead st, Henderson, NV" /> 
     <input type="submit" value="Set location" /> 
    </form> 
    <span class="close">x</span> 
    </div> 
</div>