用html编写一个红绿灯，要求 1. 红绿灯控件需要可以和文字进行混排，不出现换行等问题。 2. 红绿灯控件的三种颜色需要可以便利的实现控制和切换。 3. 无任何切换状态时，需要考虑默认状态，默认状态色值外圈：#d9d9d9 60%，内圈：#d9d9d9 80%。

好的，下面是一个满足要求的红绿灯示例，使用 HTML、CSS 和 JavaScript 编写。

HTML 代码：

<p>交通灯状态：<span id="traffic-light-status">默认</span></p>
<div class="traffic-light">
  <div id="red-light" class="light"></div>
  <div id="yellow-light" class="light"></div>
  <div id="green-light" class="light"></div>
</div>
<button onclick="changeLights()">切换状态</button>

CSS 代码：

.traffic-light {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 140px;
  margin-right: 10px;
}

.light {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 10px;
  left: 10px;
  background-color: #d9d9d9;
  box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1) inset;
}

#red-light {
  background-color: #f00;
}

#yellow-light {
  top: 60px;
  background-color: #ff0;
}

#green-light {
  top: 110px;
  background-color: #0f0;
}

#traffic-light-status {
  font-weight: bold;
  font-size: 16px;
}

JavaScript 代码：

var trafficLightStatus = document.getElementById('traffic-light-status');
var redLight = document.getElementById('red-light');
var yellowLight = document.getElementById('yellow-light');
var greenLight = document.getElementById('green-light');

function changeLights() {
  if (redLight.style.backgroundColor === 'rgb(255, 0, 0)') {
    redLight.style.backgroundColor = '#d9d9d9';
    yellowLight.style.backgroundColor = '#d9d9d9';
    greenLight.style.backgroundColor = '#0f0';
    trafficLightStatus.textContent = '绿灯';
  } else if (yellowLight.style.backgroundColor === 'rgb(255, 255, 0)') {
    redLight.style.backgroundColor = '#f00';
    yellowLight.style.backgroundColor = '#d9d9d9';
    greenLight.style.backgroundColor = '#d9d9d9';
    trafficLightStatus.textContent = '红灯';
  } else {
    redLight.style.backgroundColor = '#d9d9d9';
    yellowLight.style.backgroundColor = '#ff0';
    greenLight.style.backgroundColor = '#d9d9d9';
    trafficLightStatus.textContent = '黄灯';
  }
}

这段代码创建了一个 `div` 元素作为交通信号灯，包含三个子元素，分别代表红、黄、绿三个信号灯。同时，还创建了一个按钮，用于切换信号灯的状态。`p` 元素中的 `span` 元素用于显示当前交通灯的状态。

CSS 中设置了默认状态的颜色为灰色，同时使用了 `box-shadow` 属性来实现外圈的效果。

JavaScript 中通过获取三个信号灯的 DOM 元素，然后通过判断当前颜色来切换信号灯的状态。同时，也更新了页面上的交通灯状态文字。