Css 在DIV下面对齐单选按钮

免责声明：我是一个VB的家伙，有4天的jQuery和CSS经验。我只是想弄清楚网页设计的世界

我想学习如何处理这样的设计：

!！（）

从图像中可以看出，我相信有一个外部div，图像中心对齐，图像周围有一个白色边框

图像两侧都有一个左右按钮，与图像重叠（天知道这怎么可能！）

外部Div下面是四个单选按钮，一个接一个地对齐

如何进行这种设计？（只对设计感兴趣，而不是编码部分）

评论/解释会有帮助！谢谢

编辑：以我16小时的经验，这就是我目前所拥有的。很抱歉成为这样一个n00b

<div id="somediv">
    <img src=""/>
    <img src=""/>
    <img src=""/>
</div>
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">
<input type="radio" name="op">

div {
    background-color:blue;
    border: 2px white;
    position: absolute;
}

img {
    display: none;
    position: absolute;
}

div{
背景颜色：蓝色；
边框：2件白色；
位置：绝对位置；
}
img{
显示：无；
位置：绝对位置；
}

既然您提到您已经在使用jQuery，请查看和

基本上，您需要创建两个列表元素。 一个包含幻灯片，另一个包含导航按钮

---

编辑：

因为您只是在寻找一个设计示例，所以它展示了如何在没有任何实际功能的情况下创建您所说的布局

HTML:

---

在浏览器窗口上单击鼠标右键，然后选择“查看源…”。然后你可以看到它是如何工作的。实际上这只是我用meThis做的一个截图。这是一个非常简单的设计，如果这让你感到害怕，那么我强烈建议你学习更多关于

css

和

html

。谢谢你的建议@JoshPowell。这就是我来这里的原因！我想您看到的是这个jQuery插件生成的一些东西：正如我所说的，我对编码部分不感兴趣。我只是想看看如何用CSS实现这种设计。我需要单选按钮我刚刚用一个使用单选按钮的解决方案更新了我的答案。谢谢你的帮助，但老实说，我只想要设计（没有功能）。试着从初学者的角度去想象。我很感兴趣的是看看简单的CSS是如何设计div、一个图像、一些单选按钮以及那些重叠的左箭头和右箭头的。你能编辑你的例子来删除编码部分吗？谢谢。你还可以展示CSS是否能够实现图像上的左右箭头。这可能吗？是的，很容易做到。更新了我的答案。

<div class="slider">
    <img class="image" src="http://i.imgur.com/dL3io.jpg" />

    <div class="navigation-arrows">
      <div class="arrow left"><</div>
      <div class="arrow right">></div>
    </div>
</div>

<div class="navigation">
  <input type="radio" name="op">
  <input type="radio" name="op">
  <input type="radio" name="op">
  <input type="radio" name="op">
</div>

body {
    text-align: center;
}

.slider,
.slider .image {
    width: 400px;
}

.slider .image,
.navigation-arrows,
.navigation-arrows .arrow {
    position: absolute;
}

.navigation-arrows,
.navigation-arrows .arrow {
    height: 25px;
}

.slider {
    height: 250px;
    position: relative;
    margin: 20px auto;
}

.slider .image {
    height: 250px;
    left: 0;
    top: 0;
}

.navigation-arrows {
    width: 100%;
    margin: 0 auto;
    top: 125px;
}

.navigation-arrows .arrow {
    border-radius: 12.5px;
    background: #000000;
    color: #ffffff;
    width: 25px;
    line-height: 25px;
    cursor: pointer;
}

.navigation-arrows .left {
    left: 5px;
}

.navigation-arrows .right {
    right: 5px;
}