Question

我正在尝试使用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;
}

Answer 1

你是“时间”是一个元素而不是一个类，所以你将使用以下选择器：

figure figcaption time {
    /* attributes */
}

这匹配<time>元素内<figcaption>个元素所在<figcaption>元素内的所有<figure>元素。

匹配

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

不匹配：

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

See the specification here

Answer 2

它将以这种方式工作：

#map time{
   display: inline;
}

Answer 3

您是否尝试内嵌图像和时间？

figure figcaption {
    display: inline-block;
}
figure img {
    display: inline-block;
}

CSS中的内联元素

3 个答案: