0

我正在尝试获取特定元素时间,以使用 CSS 内联显示。

HTML 代码是:

  <nav class="vertical">
     <ul>
        <li><a href="#">Home Page</a></li>
        <li><a href="#">Black Canyon Map</a></li>
        <li><a href="#">Black Lake Map</a></li>
        <li><a href="#">Continental Divide Map</a></li>
        <li><a href="#">Estes Cone Map</a></li>
        <li><a href="#">Flattop Map</a></li>
        <li><a href="#">Meeker Map</a></li>
        <li><a href="#">Odessa Map</a></li>
        <li><a href="#">Longs Peak Map</a></li>
        <li><a href="#">Lumpy Ridge Map</a></li>
        <li><a href="#">Petit Grepon Map</a></li>
        <li><a href="#">Sky Pond Map</a></li>
        <li><a href="#">Trail Ridge Road Map</a></li>
        <li><a href="#">Twin Sisters Map</a></li>
     </ul>
  </nav>



  <section id="summary">
     <h1>Longs Peak Interactive Map</h1>
     <p>
        At 14,255 feet, Longs Peak towers above all other summits in 
        Rocky Mountain National Park. The summer is the only season 
        in which the peak can be climbed by a non-technical route. 
        Early mornings break calm, but clouds build in the afternoon sky, 
        often exploding in storms of brief, heavy rain, thunder and 
        dangerous lightning. Begin your hike early, way before dawn, 
        to be back below timberline before the weather turns for 
        the worse.
     </p>
     <p>
        The Keyhole Route, Longs Peak's only non-technical hiking 
        pathway, is a 16 mile round trip with an elevation gain of 
        4,850 feet. Though non-technical, the Keyhole Route is still 
        challenging and is not recommended for those who 
        are afraid of heights or exposed ledges. Hikers should be 
        properly outfitted with clothing, food, and water. Use caution 
        when ascending or descending steep areas. Don't be afraid to 
        back down when bad weather threatens.
     </p>
     <p>
        Move your mouse pointer over the numbered landmarks in the 
        map to preview the hike.
     </p>
  </section>



  <section id="map">
     <figure id="point0">
        <img src="image0.jpg" alt="" />
        <figcaption>
           <time>3:30 a.m.</time> Start from the Longs Peak Ranger
           Station, nine miles south of Estes Park. Be sure to pack 
           food, extra water, 
           sunblock, warm clothes, gloves, and caps.
        </figcaption>
     </figure>

     <figure id="point1">
        <img src="image1.jpg" alt="" />
        <figcaption>
           <time>5:30 a.m.</time> Stop at Mills Moraine for a 
           view of the sunrise.
       </figcaption>
     </figure>

     <figure id="point2">
        <img src="image2.jpg" alt="" />
        <figcaption>
           <time>7:30 a.m.</time> Time for a break at Granite Pass.
        </figcaption>
     </figure>

     <figure id="point3">
        <img src="image3.jpg" alt="" />
        <figcaption>
           <time>8:30 a.m.</time> Climb through the Boulder Field 
           on the way to the Keyhole.
        </figcaption>
     </figure>

     <figure id="point4">
        <img src="image4.jpg" alt="" />
        <figcaption>
           <time>9:00 a.m.</time> Stop at the
           Agnes Vaille shelter for a well-deserved breakfast.
        </figcaption>
     </figure>

     <figure id="point5">
        <img src="image5.jpg" alt="" />
        <figcaption>
           <time>9:30 a.m.</time> It's time to go through
           the Keyhole. Be prepared for heavy winds.
        </figcaption>
     </figure>

     <figure id="point6">
        <img src="image6.jpg" alt="" />
        <figcaption>
           <time>10:00 a.m.</time> Follow the painted targets 
           along the Ledges.
        </figcaption>
     </figure>

     <figure id="point7">
        <img src="image7.jpg" alt="" />
        <figcaption>
           <time>11:00 a.m.</time> Take special care when crossing 
           the Narrows.
        </figcaption>
     </figure>

     <figure id="point8">
        <img src="image8.jpg" alt="" />
        <figcaption>
           <time>11:15 a.m.</time> You're almost there! Climb the
           Homestretch to reach the summit.
        </figcaption>
     </figure>

     <figure id="point9">
        <img src="image9.jpg" alt="" />
        <figcaption>
           <time>11:45 a.m.</time> Congratulations, you've reached 
           the top! Time for lunch and a few photos.
        </figcaption>
     </figure>

  </section>

我正在专门查看以“section id="map"" 开头的部分

这段 CSS 代码能正常工作吗?如果不能,正确的代码应该是什么?

figure figcaption.time {
display: inline;
}
4

3 回答 3

2

您的“时间”是一个元素而不是一个类,因此您将使用以下选择器:

figure figcaption time {
    /* attributes */
}

这匹配所有<time>存在于元素内<figcaption>的元素,其中<figcaption>元素存在于<figure>元素内。

火柴:

<figure>
    <div>
        <figcaption>
            <div>
                <time />
            </div>
        </figcaption>
    </div>
</figure>

不匹配:

<div>
    <figcaption>
        <div>
            <time />
        </div>
    </figcaption>
</div>

请参阅此处的规范

于 2013-09-08T17:30:50.027 回答
1

你想内联图像和时间吗?

figure figcaption {
    display: inline-block;
}
figure img {
    display: inline-block;
}
于 2013-09-08T17:33:54.347 回答
1

它将以这种方式工作:

#map time{
   display: inline;
}
于 2013-09-08T17:30:54.643 回答