Question

每当我将文字放在矩形的顶部时，它就不再让我点击链接了。我怎样才能解决这个问题？另外，

每当我尝试更改“圣地亚哥”文字的颜色时，它都不会让我改变文字的位置。顺便说一句，我是HTML的初学者。

  #ViewOnMaps {
    background-color: #FF604C;
    height: 35px;
    width: 150px;
    position: absolute;
    top: 245px;
    left: 50px;
    opacity: .5;
  }
  #circular {
    width: 150px;
    height: 150px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(http://media-cdn.tripadvisor.com/media/photo-s/02/5f/16/e4/la-jolla-cove.jpg) no-repeat;
    position: absolute;
    top: 15px;
    left: 45px;
  }
  span.SanDiego {
    position: absolute;
    top: 250px;
    left: 70px;
    width: 100%;
    font-size: 20px;
    color: #999;
  }
  span.ViewOnMaps {
    position: absolute;
    top: 235px;
    left: 78px;
  }
  #maps {
    background-color: white;
    height: 300px;
    width: 220px;
    border-style: solid;
    border-color: #B4B4B4
  }
  #menu {
    position: absolute;
    right: 52px;
    bottom: 638px;
  }
  body {
    background-color: #E8E8E8;
  }
  nav {
    background-color: white;
    height: 75px;
    width: 1140px;
    float: right;
    border-style: solid;
    border-color: #B4B4B4
  }
  nav ul {} nav ul li {
    list-style-type: none;
    width: 150px;
    float: left;
    text-align: center;
  }
  li a {
    text-decoration: none;
    color: #999;
    line-height: 50px;
    display: block;
  }
  li a:hover {
    text-decoration: underline;
    color: #FF604C;
  }

<nav>
  <ul id="menu">
    <li><a href="flatuigoal.html">Home</a>
    </li>
    <li><a href="gallery.html">Gallery</a>
    </li>
    <li><a href="#">Message</a>
    </li>
    <li><a href="#">Music</a>
    </li>
    <li><a href="#">Search</a>
    </li>
    <li><a href="#">Settings</a>
    </li>
    <li><a href="#">Location</a>
    </li>
  </ul>
</nav>
<div id="maps"></div>
<div id="circular"></div>
<span class="SanDiego">
    			<a href="https://www.google.com/maps/place/San+Diego,+CA/@32.8245525,-117.0951632,10z/data=!3m1!4b1!4m2!3m1!1s0x80d9530fad921e4b:0xd3a21fdfd15df79">View on Maps</a>
  		</span>
<div id="ViewOnMaps"></div>

Answer 1

使用此

更改/添加您的风格

span.SanDiego {
    position: absolute;
    top: 250px;
    left: 70px;
    width: 100%;
    font-size: 20px;
    z-index:1;
}
.SanDiego a {color:red} /*--Change your text's color here--*/

Demo

Answer 2

你到处都使用过不必要的元素定位。如果使用绝对位置，则必须指定位置：相对于父div，否则位置将相对于html的主体。

我没有正确地理解你的问题，但是从我得到的东西我尽可能地解决它。以下是解决方案：http://codepen.io/vikrantnegi007/pen/LVqvjN

HTML代码：

try {
            String currentIP = InetAddress.getLocalHost().toString();
            String subnet = getSubnet(currentIP);
            System.out.println("subnet: " + subnet);

            for (int i=1;i<254;i++){

                String host = subnet + i;
                System.out.println("Checking :" + host);

                if (InetAddress.getByName(host).isReachable(timeout)){
                    System.out.println(host + " is reachable");
                    try {
                        Socket connected = new Socket(subnet, port);
                    }
                    catch (Exception s) {
                        System.out.println(s);
                    }
                }
            }
        }
        catch(Exception e){
            System.out.println(e);
        }

CSS代码：

<div id="maps">
    <div id="circular">

    </div>
    <div class="SanDiego">
        <a href="https://www.google.com/maps/place/San+Diego,+CA/@32.8245525,-117.0951632,10z/data=!3m1!4b1!4m2!3m1!1s0x80d9530fad921e4b:0xd3a21fdfd15df79">View on Maps</a>
    </div>

</div>

    <nav>
  <ul id="menu">
    <li><a href="flatuigoal.html">Home</a>
    </li>
    <li><a href="gallery.html">Gallery</a>
    </li>
    <li><a href="#">Message</a>
    </li>
    <li><a href="#">Music</a>
    </li>
    <li><a href="#">Search</a>
    </li>
    <li><a href="#">Settings</a>
    </li>
    <li><a href="#">Location</a>
    </li>
  </ul>
</nav>

告诉我你还有什么想做的。

如何将href文本放在矩形div框的顶部？

2 个答案: