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>

设计地图弹出框在CSS中

1 个答案: